新建 icon.ts
import type { App } from 'vue'
import { createFromIconfontCN } from '@ant-design/icons-vue'
// 注冊遠程 icon
const Icon = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/font_643002_scbto9o3bai.js' // 在 iconfont.cn 上生成
})
export function setupIcon(app: App<Element>) {
app.component('IconFont', Icon)
}
// 使用<IconFont v-if="route.meta?.icon" :type="route.meta.icon" />
main.js引入
// 注冊全局圖標 - iconfont上面的愁拭，需要配置自己的地址
setupIcon(app)
iconfont圖標要去色孕索，否則svg上的fill可能會自帶顏色,導致無法上色
image.png
或者在代碼里面寫 重置fill
svg path {
fill: currentColor;
}
使用組件的時候就可以愉快的設置啦
<IconFont
type="icon-anquan"
:style="{
color: '#fff',
fontSize: '25px'
}"
/>
