[JavaScript知识库]在vue项目中使用svg文件

准备

• 在网上下载svg文件, 将下载的svg文件放在src/icons/svg
• 可以去阿里巴巴矢量图标库下载svg文件,或者复制svg文件代码到名为money.svg的文件（文件名是可以任意取的）
• 在vue项目中使用
  <svg-icon iconName="money"></svg-icon>

实现

1. 安装

npm i svg-sprite-loader@4.1.3 -D

2. 配置 vue.config.js

const path = require('path')
function resolve(dir) {
  return path.join(__dirname, dir)
}

module.exports = {
  chainWebpack(config) {
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}

3. 注册全局 svg-icon 组件

// /src/component/SvgIcon.vue

<template>
  <svg>
    <use :xlink:href="`#icon-${iconName}`" />
  </svg>
</template>

<script>
export default {
  props: {
    iconName: {
      type: String,
      require: true
    }
  }
}
</script>

// /src/icons/index.js

import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'
Vue.component('svg-icon', SvgIcon)

const req = require.context('./svg', false, /\.svg$/)
const requireAll = requireContext => requireContext.keys().map(requireContext)
requireAll(req)

4. 在 main.js 中引入

// main.js

import Vue from 'vue'
import '@/icons'
import App from './App.vue'

new Vue({
  render: h => h(App)
}).$mount('#app')

5. 在 App 组件中使用

// App.vue

<template>
  <div>
  // 注意: 在 src/icons/svg 文件夹中存放 money.svg 文件
    <svg-icon iconName="money"></svg-icon> 
  </div>
</template>