0
点赞
收藏
分享

微信扫一扫

SVG的引入及坑

在Vue项目中使用需要先安装svg-sprite-loader

npm install svg-sprite-loader -D
或
yarn add --dev svg-sprite-loader -D

先在.d.ts文件中加入两行代码,如下

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

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

然后在需要使用到svg的文件中template部分写以下代码

<template>
    <svg>
         <use xlink:href="#xxx"/>
    </svg>
</template>

在ts部分写以下代码

<script lang="ts">
    import x from '@/assets/icons/label.svg';
    console.log(x)//这里使用log是因为,引入svg如果没有用到,那么用import就会被Treeshaking,下面会用require。
    export default {
    name:'Nav'
  }
</script>

svg-sprite-loader会把svg变成symbol,symbol对应的id为label,并在symbol外套一个svg,在body里生成。

如要使用多个svg,那在文件里添加几次svg,使用几次use,在ts里import几次即可,但这样很麻烦,可以引入一个目录,把ts里的代码改成如下

<script lang="ts">

  let importAll = (requireContext: __WebpackModuleApi.RequireContext) => requireContext.keys().forEach(requireContext);
  try {
    importAll(require.context('../assets/icons', true, /\.svg$/));//使用require
  } catch (error) {
    console.log(error);
  }
  export default {
    name: 'Icon'
  };
</script>

SVG的坑

如果svg里自带颜色fill="red",那么在外面怎么修改都无法改变颜色,这时可以把svg中的fill删掉,但如果有十多二十个,甚至上百个svg,删起来就很麻烦。
另一个办法就是安装svgo-loader(yarn add --dev svgo-loader)并在vue.config.js的config.nodule下添加两句代码

config.module
            .use('svgo-loader').loader('svgo-loader')
            .tap(options=>({...options,plugins:[{removeAttrs:{attrs:'fill'}}]})).end();

这会自动去掉svg中的fill属性

在React项目中同样要做这些操作

但是在安装svg-sprite-loader和svgo-loader之前要先yarn eject,生成webpack.config.js,之后在该文件module→rules→oneOf中添加以下代码

{
  test: /\.svg$/,
  use: [
    { loader: 'svg-sprite-loader', options: {} },
    { loader: 'svgo-loader', options: {} }
  ]
}

同样引入svg也要添加下面两行代码

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

这时 __WebpackModuleApi和require会报错,安装@types/webpack-env(yarn add --dev @types/webpack-env)错误就会消除

举报

相关推荐

0 条评论