vue项目中使用svg symbols

提前声明

配置完成之后没有显示svg，那么你可能应该重启一下你的服务器。

svg-sprite-loader

用于解析svg

yarn add svg-sprite-loader --dev

svgo-loader

用于优化svg

yarn add svgo-loader --dev

例如可以用来删除svg的默认属性

具体细节请查看官方github

配置vue.config.js

const path = require('path')

module.exports = {
    lintOnSave: false,
    chainWebpack: config => {
        const dir = path.resolve(__dirname, 'src/assets/icons')

        config.module
            .rule('svg-sprite')
            .test(/\.svg$/)
            .include.add(dir).end() // 包含 icons 目录
            .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract: false}).end()
            // 使用svgo-loader删除svg中的fill属性
			.use('svgo-loader').loader('svgo-loader')
            .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
        config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'), [{plainSprite: true}])
        config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录
    }
}

配置shims-vue.d.ts

declare module "*.svg" {
  const content: string;
  export default content;
}

使用svg

引入svg

import svg1 from 'src/...'
console.log(svg1)

引入之后控制台会打印出一个对象，html元素中会多出svg标签

使用svg标签

<svg>
  <use xlink:href="#<symbol中的id>"></use>
</svg>

引入文件中所有的svg图标

  const importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {importAll(require.context('../assets/icons', true, /\.svg$/));} catch (e) {console.log(e);}