# Icon圖標擴展方法 === 這里介紹的是系統與阿里矢量圖標庫的結合 [TOC] ## 圖標準備 登錄icon，并將圖標下載至本地。如果還沒有項目可在我的項目中新建項目并上傳圖標  新建項目  FontClass/ Symbol 前綴可修改 也可為默認的icon 引用時一致即可 Font Family 可修改 ## 整合項目 在src/components（其他目錄也可以）下新建文件夾 iconfont，使用Fontclass模式時，需引入iconfont.css 將下載圖標解壓后，復制文件到iconfont下（demo可不復制）  在iconfont文件下創建文件common.less，將如下代碼復制到common.less文件中 ~~~ /* 引入 icon class 文件 */ @import "./iconfont.css"; /* 設置使用字體的優先級 anticon 高 */ :global(.anticon) { /* :global() 是為了覆蓋全局class .anticon 的樣式 */ &:before { font-family: "anticon", "anticon-jeecg" !important; /* 默認樣式是這樣 font-family: "anticon" !important; */ } } ~~~ 將common.less在全局文件中引入，這里是在src/App.vue中引入 ~~~ // Fontclass模式 import '@/components/iconfont/common.less' // 使用 symbol模式 支持多色 import '@/components/iconfont/iconfont.js' ~~~ ## 在所需文件處，引 入圖標 ~~~ font-class模式 ： <i class="anticon-jeecg actionglasses1" style="font-size: 65px;"/> anticon-jeecg 與icon項目的Font Family 對應 actionglasses1為icon項目的前綴和圖片名稱 ~~~  ~~~ symbol 方式： <svg class="icon" aria-hidden="true"> <use xlink:href="#actionglasses1"></use> </svg> //可修改圖標樣式 加入通用 CSS 代碼（引入一次就行） .icon { width: 4em; height: 4em; vertical-align: -0.15em; fill: currentColor; overflow: hidden; } ~~~  ## 菜單中使用自定義圖標 ### 1.菜單表中的icon字段,保存自定義圖標時，手動添加'cus_'前綴  ### 2.菜單index.js中處理顯示自定義圖標 src/components/menu/index.js