这篇文章主要介绍了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]' }) }
以上就配置完毕
注:未注册组件在人口文件全局注册即可使用(mai来4源gaodaimacom搞#代%码*网n.js)
以上就是浅析vue cli3 封装Svgicon组件正确姿势(推荐)的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：浅析vue cli3 封装Svgicon组件正确姿势(推荐)
转载请注明原文链接：浅析vue cli3 封装Svgicon组件正确姿势(推荐)
