图标使用


使用方式

若依ruoyi-vue中使用全局 Svg Icon 图标组件。地址:src\components\SvgIcon\index.vue
该组件是在src\assets\icons\index.js文件中被注册为全局组件的,可以在项目任意地方使用。所有的图标都在src\assets\icons\svg目录下。可自行添加或者删除图标,所有图标都会被自动导入,无需手动操作。

<!-- icon-class 为 icon 的名字; class-name 为 icon 自定义 class-->
<svg-icon icon-class="password"  class-name='custom-class' />
改变颜色

svg-icon 默认会读取其父级的 color fill: currentColor;

你可以改变父级的color或者直接改变fill的颜色即可。

<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" style="fill:red"/>
注意事项

如果你是从 iconfont 下载的图标,记得使用如 Sketch 等工具规范一下图标的大小问题,不然可能会造成项目中的图标大小尺寸不统一的问题。 本项目中使用的图标都是 128*128 大小规格的。