svg-sprite-loader

在ts文件中直接引入icons直接提示annot find module './xxx.svg'。如何让ts文件支持svg? 在vue.d.ts结尾的定义文件中加上 这段表示支持svg

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

加上这段后，得到只是一个svg的路径。那么就使用svg-sprite-loader，用 svg-sprite-loader 解放你的icon。 svg-sprite-loader的原理是利用svg的symbol元素，将每个元素包括在symbol中，通过use元素使用该symbol。

安装

npm install svg-sprite-loader -D
# via yarn
yarn add svg-sprite-loader -D

配置

然而svg-sprite-loader提供的是webpack的配置方法， 我在vue项目下没有webpack的目录 ，就需要按照vue.cli的文档把z在webpack配置方法翻译成vue.config.js的内容。

这个config就是vue把webpack的api封装给暴露我们使用的 最终改成一下

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-mod').loader('svg-sprite-loader-mod').options({extract:false}).end()
        .use('svgo-loader').loader('svgo-loader')//安装svgo-loader 去掉svg自带fill的坑
        .tap(options => ({...options, plugins: [{removeAttrs: {attrs: 'fill'}}]})).end()
    config.plugin('svg-sprite').use(require('svg-sprite-loader-mod/plugin'), [{plainSprite: true}])
    config.module.rule('svg').exclude.add(dir) // 其他 svg loader 排除 icons 目录

  }
}

使用

在vue.config.js配置完成后就可以使用svg了

<svg>
	<use xlink: href="#label"></use>
</svg>

引入整个icons文件

如果多个svg时，每一个svg都引入都要 import未免过于麻烦，直接把包含svg的icons整个引入 就可以直接使用了

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

踩坑之一

在做好以上配置后，发现svg依然没有显示在界面，但是在给svg设置background会有显示背景色，这时要注意的时我们在配置中加上svg-sprite-loader-mod和svgo-loader都需要安装一下，否则就可能出现svg自到fill的颜色无法更改，以及svg不显示的问题。