浅析vue cli3 封装Svgicon组件正确姿势(推荐)

vue cli3 手把手教学封装Svgicon组件

第一步:在src文件下新建一个放置svg文件的文件夹

第二步:在components文件下新建一个Svg组件

这是一个 文件夹 专门用来存放项目里面需要使用的svg文件，比如 a.svg b.svg …

svg组件源码

.svg-icon {
   width: 1em;
   height: 1em;
   vertical-align: -0.15em;
   fill: currentColor;
   overflow: hidden;
 }

第三步:配置vue.config.js

• 需要的loader
• npm i svg-sprite-loader -D

chainWebpack: config => {
  const svgRule = config.module.rule('svg')
  svgRule.uses.clear()
  svgRule
   .use('svg-sprite-loader')
   .loader('svg-sprite-loader')
   .options({
    symbolId: 'icon-[name]'
   })
}

 以上就配置完毕

注:未注册组件在人口文件全局注册即可使用(main.js)

到此这篇关于浅析vue cli3 封装Svgicon组件正确姿势(推荐)的文章就介绍到这了,更多相关vue cli3 Svgicon组件内容请搜索考高分网以前的文章或继续浏览下面的相关文章希望大家以后多多支持考高分网！