如何在 vue 中使用 svg symbols

安装svg-sprite-loader插件

npm install svg-sprite-loader -D

或者

yarn add svg-sprite-loader -D

在vue.config.js中配置 svg-sprite-loader

const path = require('path');
module.exports = {
  chainWebpack:config =>{
    const dir = path.resolve(__dirname,'src/assets/icons')
    config.module
      .rule('svg-sprite')
      .test(/\.svg$/)
      .include.add(dir).end() //设置 icons 目录走 svg-sprite 规则
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract : false}).end()
      .use('svgo-loader').loader('svgo-loader')
      .tap(options => ({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end()//安装插件去除svg中的fill属性
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir)//其他svg loader 排除 icons 目录
  }
}

也可以这么配置

const { defineConfig } = require('@vue/cli-service')

// 加在头部
const path = require('path')
 
 
function resolve (dir) {
  return path.join(__dirname, dir)
}


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

注意：src/assets/icons这个文件夹放着你的svg文件

封装IconSvg.vue通用组件

加载所有的svg静态资源，并且把 IconSvg注册到全局组件当中

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 引入本地的svg文件
// 定义一个加载目录的函数
const requireAll = requireContext => requireContext.keys().map(requireContext)
const req = require.context('./assets/icons', false, /\.svg$/)
// 加载目录下的所有的 svg 文件
requireAll(req)

// 全局注册IconSvg组件
const IconSvg = () => import('./components/svg/IconSvg');
const components = {
  IconSvg
}
Object.keys(components).forEach(item => {
  Vue.component(item, components[item])
})

Vue.config.productionTip = false

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

使用

使用的话有多种形式，我们一个一个来看。

1、使用自己编写的svg文件

        在src/assets/icons文件夹下面创建circle.svg（一定是这个文件夹，因为这个文件夹下的svg文件会被你的svg插件解析）

        经过svg-sprite-loader插件的解析，你在html里面可以看到有个id为circle（和svg名称一样）的一个symbol标签挂载在svg标签下面

         这个时候直接使用就可以了

        

        

 2、将svg标签封装到一个vue文件中

        创建SvgList.vue组件

        

3、使用iconfont的svg代码

         在src/assets/icons这个文件夹下面去创建heart.svg(一定是这个文件夹，因为这个文件夹下的svg文件会被你的svg插件解析)

        

        使用

        效果

         在这里你会遇到一个问题，那就是给这个svg改颜色改不掉，你只要把svg标签里的fill属性去掉就可以了，或者把fill属性设置成none。还有一个stroke轮廓颜色也是可以设置的。

4、直接引入整个iconfont的svg图片

        生成symbol代码

        

         在index.html中引入上面的symbol代码

        看控制台已经全部引入进来了

        使用

效果

提示：当然你也可以上传svg图片到iconfont平台，然后再下载下来使用，但是在下载下来的时候一定要去去除颜色并提交，这样你的svg图片就可以随心所欲的改颜色了