本為主要介紹不同項目使用iconfont在線鏈接的方式

首先，先在iconfont中新建一個項目，存放項目中所需的icon。

進入iconfont官網http://iconfont.cn/
登錄后點擊新建項目，然后填入信息

　　　　

　　　　　　

　　創建成功后項目會出現在左側列表中，點擊項目名稱，進入項目后，可進行上傳圖標

各項目不同的實現

1. vue + element-ui

　　復制iconfont項目的symbol鏈接，在html.index中引入iconfont在線鏈接

　　　<linkrel="stylesheet"type="text/css"href="iconfont在線鏈接地址"/>

　　項目用法

　　　　

　　　　<div class="iconfont iconequal"></div>

　　　　class中的iconfont是新建項目的時候配置的fontfamily，默認為iconfont。iconequal為icon的font class碼

2.　vue + antd-vue-pro

　　antd-vue-pro配置文件defaultSettings中配置iconfontUrl

　　首先獲取iconfont在線鏈接，注意這里使用symbol在線鏈接

　　新建icon.js文件

/**
 * Custom icon list
 * All icons are loaded here for easy management
 * @see https://vue.ant.design/components/icon/#Custom-Font-Icon
 *
 * 自定義圖標加載表
 */
import { Icon } from 'ant-design-vue'
import defaultSettings from '@/config/defaultSettings'

export const IconFont = Icon.createFromIconfontCN({
    scriptUrl: defaultSettings.iconfontUrl, // generated by iconfont.cn
})

　　　　

// main.js 中注冊組件

import { IconFont } from './core/icons'

Vue.component('icon-font', IconFont)


// 業務代碼中使用

<icon-font type="iconequal" />

3. react + antd

　

// common.js
// 自定義iconfont

export const IconFont = createFromIconfontCN({
    scriptUrl: '//at.alicdn.com/t/xxx', //iconfont在線鏈接
})


// 業務代碼中xxx.tsx

import { IconFont } from '@constants/common'

<IconFont type="iconequal" />

總結

以上是生活随笔為你收集整理的iconfont在线链接使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。