vue3 iconfont Symbol引用无法设置颜色问题

作者: noyanse | 来源:发表于2022-04-19 14:15 被阅读0次

新建 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'
              }"
            />