圖標 · vue-element-admin

# 圖標如果你沒有在本項目[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)生成圖標庫代碼首先，搜索并找到你需要的圖標，將它采集到你的購物車里，在購物車里，你可以將選中的圖標添加到項目中（沒有的話，新建一個），后續生成的資源/代碼都是以項目為維度的。 > 如果你已經有了設計稿，只是需要生成相關代碼，可以上傳你的圖標后，再進行上面的操作。 ![賬戶相關布局](https://gw.alipayobjects.com/zos/rmsportal/jJQYzRyqVFBBamUOppXH.png) **現在本項目支持和推薦單獨導出 svg 的引入使用方式。下載方式如下圖：** ![](https://wpimg.wallstcn.com/1f8b1e56-cfd9-4ef7-a0aa-dfb0c2883aa3.gif) 下載完成之后將下載好的 .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)