# 图标 如果你没有在本项目[Icon](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/icons/svg)中找到需要的图标，可以到[iconfont.cn](http://iconfont.cn/)上选择并生成自己的业务图标库，再进行使用。或者其它 svg 图标网站，下载 svg 并放到文件夹之中就可以了。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E7%94%9F%E6%88%90%E5%9B%BE%E6%A0%87%E5%BA%93%E4%BB%A3%E7%A0%81)生成图标库代码 首先，搜索并找到你需要的图标，将它采集到你的购物车里，在购物车里，你可以将选中的图标添加到项目中（没有的话，新建一个），后续生成的资源/代码都是以项目为维度的。 > 如果你已经有了设计稿，只是需要生成相关代码，可以上传你的图标后，再进行上面的操作。  **现在本项目支持和推荐单独导出 svg 的引入使用方式。下载方式如下图：**  下载完成之后将下载好的 .svg 文件放入`@/icons/svg`文件夹下之后就会自动导入。 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F)使用方式 ~~~ <svg-icon icon-class="password" /> // icon-class 为 icon 的名字 ~~~ [组件介绍](https://panjiachen.github.io/vue-element-admin-site/zh/feature/component/svg-icon.html) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E6%94%B9%E5%8F%98%E9%A2%9C%E8%89%B2)改变颜色 `svg-icon`默认会读取其父级的 color`fill: currentColor;` 你可以改变父级的`color`或者直接改变`fill`的颜色即可。 > ## TIP > > 如果你遇到图标颜色不对，可以参照本[issue](https://github.com/PanJiaChen/vue-element-admin/issues/330)进行修改 ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E8%AF%A6%E7%BB%86%E6%96%87%E7%AB%A0)详细文章 更多详细内容 可阅读该文:[手摸手，带你优雅的使用 icon](https://juejin.im/post/59bb864b5188257e7a427c09) ## [#](https://panjiachen.github.io/vue-element-admin-site/zh/guide/advanced/icon.html#%E7%9B%AE%E5%89%8D%E5%8F%AF%E7%94%A8%E5%9B%BE%E6%A0%87)目前可用图标 [src/icons/svg](https://github.com/PanJiaChen/vue-element-admin/tree/master/src/icons/svg) 线上[预览地址](https://panjiachen.github.io/vue-element-admin/#/icon/index)