需求：

將 iconfont 阿里圖標(biāo)庫的圖標(biāo)與字體引入到我們的 Vue3 + vite + TS 項(xiàng)目中來！

1.常用圖標(biāo)格式簡介

我們使用圖標(biāo)的方式有很多種，比如說直接使用 png、jpg 等圖片格式，這是最原始的方式，所以我們這里不過多闡述，它們的優(yōu)缺點(diǎn)相信大家也知道。

這里我們主要對比阿里圖標(biāo)庫提供 3 種圖標(biāo)引用方式：unicode、font-class、symbol。

1.1 unicode 格式

這種方式比較原始，主要是將圖標(biāo)以字體的形式渲染到網(wǎng)頁上，既然是以字體的格式，那么它的優(yōu)缺點(diǎn)也是顯而易見的。

特點(diǎn)：

• 兼容性最好，支持 ie6+，及所有現(xiàn)代瀏覽器。
• 支持按字體的方式去動態(tài)調(diào)整圖標(biāo)大小，顏色等等。
• 但是因?yàn)槭亲煮w，所以不支持多色。只能使用平臺里單色的圖標(biāo)，就算項(xiàng)目里有多色圖標(biāo)也會自動去色。

所以目前來說，我們并不建議以 Unicode 的方式引入 iconfont 圖標(biāo)。

使用方式示例代碼：

<i class="iconfont">&#x33;</i>

1.2 font-class 方式

font-class 方式本質(zhì)上還是使用的字體的形式，所以它的優(yōu)缺點(diǎn)其實(shí)和 unicode 方式差不多，但是卻運(yùn)用很廣泛，我們可以來看看它的特點(diǎn)，就知道為什么了。

特點(diǎn)：

• 兼容性良好，支持 ie8+，及所有現(xiàn)代瀏覽器。
• 相比于 unicode 語意明確，書寫更直觀。可以很容易分辨這個 icon 是什么。
• 因?yàn)槭褂?class 來定義圖標(biāo)，所以當(dāng)要替換圖標(biāo)時，只需要修改 class 里面的 unicode 引用。
• 不過因?yàn)楸举|(zhì)上還是使用的字體，所以多色圖標(biāo)還是不支持的。

使用方式示例代碼：

<i class="iconfont icon-xxx"></i>

可以看到它最大的特點(diǎn)就是語義明確，所以這是它很流行的重要原因之一。

1.3 symbol 方式

這種方式相較于而言比較新，它主要利用了 svg 這種格式，在以前，由于它的瀏覽器兼容性不太好，所以沒有大規(guī)模的流行。不過就目前來看，兼容性基本上不是問題了，畢竟 IE 都淘汰了。所以它是目前比較推崇的圖標(biāo)引用格式，至于為什么，我們一起來看看它的特點(diǎn)。

特點(diǎn)：

• 支持多色圖標(biāo)了，不再受單色限制。
• 通過一些技巧，支持像字體那樣，通過 font-size，color 來調(diào)整樣式。
• 兼容性較差，支持 ie9 及現(xiàn)代瀏覽器。
• 瀏覽器渲染 svg 的性能一般，還不如 png。

使用示例代碼：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

可以看到它的最大特點(diǎn)就是支持多色圖標(biāo)了，而且還支持向字體那樣調(diào)整樣式了，雖然它的渲染性能不及 png，但是它的其它好處可比 png 多多了，所以我們通常建議項(xiàng)目中使用 symbol 的方式引入圖標(biāo)庫。

這也是本篇文章將要講解的方式。

2.項(xiàng)目引入 iconfont

2.1 封裝 svg-icon 組件

我們在 iconfont 官網(wǎng)上可以看到給出了 symbol 引用示例，代碼如下：

<svg class="icon" aria-hidden="true">
    <use xlink:href="#icon-xxx"></use>
</svg>

上段代碼就是圖標(biāo)的具體使用方式，如果我們每次都按照上面的方式使用，那么無疑是很麻煩的，我們不妨將上面的代碼封裝為一個組件。在需要用到圖標(biāo)的地方直接引入我們的組件即可了。

第一步：在 components 目錄下新建 SvgIcon.vue 文件。

代碼如下：

// src/components/SvgIcon.vue
<template>
  <svg :class="svgClass" aria-hidden="true">
    <use :xlink:href="iconClassName" :fill="color" />
  </svg>
</template>
<script setup lang="ts">
import { computed } from 'vue';
const props = defineProps({
  iconName: {
    type: String,
    required: true
  },
  className: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: '#409eff'
  }
});
// 圖標(biāo)在 iconfont 中的名字
const iconClassName = computed(()=>{
  return `#${props.iconName}`;
})
// 給圖標(biāo)添加上類名
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return 'svg-icon';
});
</script>
<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  position: relative;
  fill: currentColor;
  vertical-align: -2px;
}
</style>

第二步：在 main.ts 中全局注冊

組件封裝好后我們還需要全局注冊一下，不然每次引用圖標(biāo)的時候還得單獨(dú)引入一次該組件。所以我們就在 main.ts 里面全局注冊一下。

代碼如下：

// main.ts
import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './components/SvgIcon/SvgIcon.vue'
const app = createApp(App)
app.component('SvgIcon', SvgIcon);
app.mount('#app')

2.2 引入 iconfont

接下來我們就需要去 iconfont 官網(wǎng)了，新建一個 iconfont 資源庫，存放自己的 iconfont。如下圖所示：

我們選中 symbol 模式，這里我介紹三種引入方式：

第一種：

直接在線引入官網(wǎng)提供的在線 js 地址，我們直接以 script
標(biāo)簽的形式引入即可。這種方式最為簡單，但是也有不好的一點(diǎn)，需要用戶有網(wǎng)絡(luò)環(huán)境，而且得保證 iconfont 網(wǎng)站沒有崩掉。

第二種：

直接下載至本地，我們從官網(wǎng)直接將代碼下載下來，然后放到我們項(xiàng)目中引用，也是可以的。不過這種方式稍顯麻煩，每次更新圖標(biāo)庫之后都得重新下載一遍。

第三種：

這也是我比較喜歡的方式，也就是將在線地址中的代碼直接復(fù)制粘貼到我們項(xiàng)目中來，這種方式最為簡單，每次更新圖標(biāo)庫之后只需要重新復(fù)制一下代碼即可。這里我們也將采用這種方式。

具體使用：

第一步：在項(xiàng)目 assets 目錄下新建 iconfont 目錄，在該目錄下新建 iconfont.js 文件，然后將 iconfont 在線地址中提供的代碼全部復(fù)制過來。如下圖：

第二步：然后在 main.ts 中引入 iconfont.js。

代碼如下：

import { createApp } from 'vue'
import App from './App.vue'
import SvgIcon from './components/SvgIcon.vue'
import './assets/iconfont/iconfont.js';
const app = createApp(App)
app.component('SvgIcon', SvgIcon);
app.mount('#app')

3.項(xiàng)目中具體使用 iconfont

引入 iconfont 得過程非常簡單，主要分為了以下兩步：

• 封裝 svg-icon 組件
• 引入 iconfont 生成的 js 代碼

接下來我們就實(shí)際使用試試，我們就直接在 App.vue 中引入幾個圖標(biāo)試試。

代碼如下：

<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <svg-icon iconName="icon-gongzuoleixing"></svg-icon>
  <svg-icon iconName="icon-yulan" className="yulan"></svg-icon>
</template>

可以看到我們的圖標(biāo)已經(jīng)可以使用了，其中 iconName 屬性值就是我們在 iconfont 網(wǎng)站復(fù)制的 iconfont
的名稱代碼。如果想要該顏色或大小，可以自行傳入一個類或者 color 屬性。

除此之外，如果你有自己下載好的 svg 文件，那么也是可以通過上面方式引入的，只需要將 iconName 改為你自己本地的 svg 名稱即可。

4.項(xiàng)目中使用 阿里字體

第一步：在項(xiàng)目 assets 目錄下新建 iconfont 目錄，在該目錄下新建 font.css 文件，然后將 阿里字體在線地址中提供的代碼全部復(fù)制過來

代碼如下：

@font-face {
  font-family: "思源宋體 Regular";
  font-weight: 400;
  src: url("http://at.alicdn.com/wf/webfont/xh4nx6fdEXTy/0jXUXbuJbGMJTGE1-Z9ES.woff2") format("woff2"),
    url("http://at.alicdn.com/wf/webfont/xh4nx6fdEXTy/BXimMREEQDbyuQ0kj-J5S.woff") format("woff");
  font-display: swap;
}
@font-face {
  font-family: "思源宋體 Medium";
  font-weight: 500;
  src: url("http://at.alicdn.com/wf/webfont/xh4nx6fdEXTy/SYySrGV-pN0GFAJ-cof25.woff2") format("woff2"),
    url("http://at.alicdn.com/wf/webfont/xh4nx6fdEXTy/Q9kaOvRthiBt50w-wLg7f.woff") format("woff");
  font-display: swap;
}

第二步：在main.ts文件中全局引入該文件

import '@/assets/font/font.css'

第三步：在頁面中使用字體

.font-text {
	font-family: "思源宋體 Medium";
}

總結(jié)

到此這篇關(guān)于Vue3項(xiàng)目引入阿里iconfont圖標(biāo)與字體及使用的文章就介紹到這了,更多相關(guān)Vue3引入阿里iconfont內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論