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

首先，先在iconfont中新建一個(gè)項(xiàng)目，存放項(xiàng)目中所需的icon。

進(jìn)入iconfont官網(wǎng)http://iconfont.cn/
登錄后點(diǎn)擊新建項(xiàng)目，然后填入信息

　　　　

　　　　　　

　　創(chuàng)建成功后項(xiàng)目會(huì)出現(xiàn)在左側(cè)列表中，點(diǎn)擊項(xiàng)目名稱，進(jìn)入項(xiàng)目后，可進(jìn)行上傳圖標(biāo)

各項(xiàng)目不同的實(shí)現(xiàn)

1. vue + element-ui

　　復(fù)制iconfont項(xiàng)目的symbol鏈接，在html.index中引入iconfont在線鏈接

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

　　項(xiàng)目用法

　　　　

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

　　　　class中的iconfont是新建項(xiàng)目的時(shí)候配置的fontfamily，默認(rèn)為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
 *
 * 自定義圖標(biāo)加載表
 */
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)


// 業(yè)務(wù)代碼中使用

<icon-font type="iconequal" />

3. react + antd

　

// common.js
// 自定義iconfont

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


// 業(yè)務(wù)代碼中xxx.tsx

import { IconFont } from '@constants/common'

<IconFont type="iconequal" />

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。