当前位置: 首页 > 文档资料 > vue-element-admin >

SVG Icon 图标

优质
小牛编辑
133浏览
2023-12-01

全局 Svg Icon 图标组件。

默认在 @/icons 中注册到全局中,可以在项目中任意地方使用。所以图标均可在 @/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的颜色即可。

tip 如果你遇到图标颜色不对,可以参照本issue进行修改

使用外链

支持使用外链的形式引入 svg。例如:

<svg-icon icon-class="https://xxxx.svg />

大小

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

本项目中使用的图标都是 128*128 大小规格的。

详细文章

更多详细内容 可阅读该文: 手摸手,带你优雅的使用 icon