vue里怎么修改svg的颜色？

vue里怎么修改svg的颜色？

1、安装依赖

​​npm i svg-sprite-loader -D​​

2、需要配置相关的svg

打开​​vue.congfig.js​​​文件，配置​​chainWebpack​​

需要在​​src/assets/svg​​新建文件夹，里面存放svg图

chainWebpack: config => { config.module.rules.delete('svg'); //重点:删除默认配置中处理svg, config.module .rule('svg-sprite-loader') .test(/\.svg$/) .include.add(resolve('src/assets/svg')) // 表示目录中的文件需要进行 svg-sprite-loader .end() .use('svg-sprite-loader') .loader('svg-sprite-loader') .options({ symbolId: 'icon-[name]' }); config.module .rule('images') .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/) .exclude.add(resolve('src/assets/svg')) // 表示目录中的文件不要进行 url-loader .end() .use('url-loader') .loader('url-loader') .options({ limit: 10240, // 设置小于10k的就base64 name: 'img/[name].[hash:7].[ext]', publicPath: assetsPublicPath });},

3、重点：编写svgIcon组件

svgIcon文件夹包含两个文件：​​svgIcon.vue​​​和​​index.js​​

svgIcon.vue如下

index.js如下：

import Vue from 'vue';import SvgIcon from '@/components/svgIcon/svgIcon.vue';// 全局注册组件Vue.component('svg-icon', SvgIcon);// 定义一个加载目录的函数const requireAll = requireContext => requireContext.keys().map(requireContext);/** * require.context是什么？ * 一个webpack的api,通过执行require.context函数获取一个特定的上下文, * 主要用来实现自动化导入模块, * 在前端工程中,如果遇到从一个文件夹引入很多模块的情况, * 可以使用这个api,它会遍历文件夹中的指定文件, * 然后自动导入,使得不需要每次显式的调用import导入模块 */const req = require.context('@/assets/svg', false, /\.svg$/);// 加载目录下的所有 svg 文件requireAll(req);

4、单页使用时

需要在​​main.js​​文件里引用

// 全局注册svg组件import '@/components/svgIcon';

5、示例

在​​svg​​​文件里添加一张​​test.svg​​​图片，​​iconClass​​​跟图片名称保持一致，​​className​​​可以自己添加类，默认会有一个​​svg-icon​​

注意：需要把svg图片文件的(需要修改的)fill以及stroke修改成​​currentColor​​。

比如下面的svg文件就​​stroke="currentColor"​​

页面使用以及样式修改

.test-name { width: 14px; height: 14px; color: green;}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。