vue中使用svg图片，支持变色

最新推荐文章于 2024-07-23 11:11:14 发布

真前端

最新推荐文章于 2024-07-23 11:11:14 发布

阅读量1.1k

点赞数

分类专栏： vue js 文章标签： vue中引入svg svg变色

本文链接：https://blog.csdn.net/weixin_42571699/article/details/120653974

版权

本文介绍了如何在Vue项目中引入和使用SVG图片，包括安装相关插件、配置vue.config.js、创建SVG组件和文件，以及如何在assets目录下管理和引入SVG资源。特别地，文章详细阐述了使SVG图标支持颜色变化的关键步骤，即设置SVG的fill和stroke属性为currentColor。

摘要由CSDN通过智能技术生成

安装插件

npm install vue2-svg-icon --save-dev

在vue.config.js文件中增加配置

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

新增

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

真前端

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
vue中使用svg图片，支持变色

安装插件npm install vue2-svg-icon --save-dev在vue.config.js文件中增加配置chainWebpack: (config) => { const svgRule = config.module.rule('svg') svgRule.uses.clear() svgRule.use('svg-sprite-loader').loader('svg-sprite-loader') .
复制链接

扫一扫