vue里面引入svg

vue里面引入svg

我们都知道在引入svg时是不可以直接使用的

如果我们直接使用import引入会直接报错，在这里我们就需要做一些配置了

首先在一个以 .d.ts 结尾的文件里面添加下面的代码

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

这样就不会报错了，但是到这里我们都还不可以直接使用

这里我们导入的只是一个路径，并不是我们想要的svg文件，这里我们就需要一个loader将这个路径里面的内容转化为我们想要的svg

这里我们需要先安装这个loader

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

下载之后我们要在vue里面配置这个loader

在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()
      .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()
    config.plugin('svg-sprite').use(require('svg-sprite-loader/plugin'),[{ plainSprite: true}])
  config.module.rule('svg').exclude.add(dir)
  }
}

配置好之后我们只需要在想要使用svg的地方添加svg标签就好了

如下

<svg>
    <use xlink:href = '#xxx'/>//xxx是想要引入的svg的名字
</svg>

当然上面使用这个svg时我们是需要引入的但是呢当svg比较多时就会这就会成为一件很繁琐的事情，那么有没有什么方法可以让我们一次全部把所有的svg引入呢，这里我们可以直接引入一个Icons目录

批量引入svg

我们只需要添加下面的代码添加到你想要引入到的组件就可以直接引入一个存放svg的目录

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

svgo-loader删除fill

在使用svg时我们会遇到一个坑，那就是当svg自带有fill属性时我们通过css是无法改变它的颜色的

所以我们需要将svg自带的fill属性删掉，但是当svg比较多是，一个一个的删就比较麻烦了，所以我们就需要批量的删除svg的自带的fill属性

这里我们需要先安装svgo-loader

npm install svgo-loader -D
#via yarn
yarn add --dev svgo-loader

然后在vue.config.ts里面加入下面的代码

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()
      .use('svg-sprite-loader').loader('svg-sprite-loader').options({extract:false}).end()
      //删除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)
  }
}