在 nuxt 上面與 svg 互動

最近碰到一個需要在 svg 上做 mouseover 的互動
基於把 svg embed 在 html 上面才能互動
因為要互動的 svg 檔案太多了，
所以才會想說是不是可以直接把 svg 當成 vue-component 來安裝，
很開心前端技術日新月異，我找到 vue-svg-loader ，
他可以同時讓 svg 既可以當背景圖，
又可以 import 在頁面上提供操作

以下是 nuxt 情況

npm i vue-svg-loader -D

修改 nuxt.config.js

build: {

/*

** You can extend webpack config here

*/

extend(config, ctx) {

const svgRule = config.module.rules.find(rule => rule.test.test('.svg'));

svgRule.test = /\.(png|jpe?g|gif|webp)$/;

config.module.rules.push({

test: /\.svg$/,

oneOf: [

{

resourceQuery: /inline/,

loader: 'vue-svg-loader',

},

{

loader: 'file-loader',

query: {

name: 'assets/[name].[hash:8].[ext]',

},

},

],

});

},

},

當成 vue 元件使用
vue檔案 - script 內

import Taipei from '~/assets/img/index/map/taipei.svg?inline'

components: {

Taipei,

vue檔案 - template 內

.icon.taiei

Taipei

[ vue.js + nuxt + vue-svg-loader =  svg in html & import img ]
https://github.com/visualfanatic/vue-svg-loader/blob/master/docs/faq.md