引言

使用 iconfont 有很多優(yōu)勢，比如只需要加載一次，全部圖標(biāo)都可以設(shè)置字號大小，顏色、透明度等，可以隨意變換字體的形態(tài)，并且圖標(biāo)是矢量的，不會隨著字體大小的變化失真，得益于 iconfont.cn 提供的便利，大多情況下，我們不必上傳自己的圖標(biāo)，只需要便捷的搜索，就可以將圖標(biāo)加入到自己的項(xiàng)目圖標(biāo)庫中，但最近工作中卻遇到了比較嚴(yán)重的問題。

現(xiàn)在做的事情

我所在公司目前正在建設(shè)低代碼平臺，這個低代碼平臺可以說是無代碼，需要從原先的各個應(yīng)用中抽取部分頁面和組件成為低代碼組件，這樣低代碼平臺就可以通過拖拽組件，形成一個有個性化的業(yè)務(wù)場景。如果 A 應(yīng)用中的 A 組件需要更新，那么低代碼中的組件也需要同步更新，所以說組件并不是單獨(dú)的一個 npm 包，而是類似于 webpack5 模塊聯(lián)邦（Module Federation）打包出來的 remote（遠(yuǎn)程）組件。

遇到的問題

問題一：命名沖突

原先都是一個個獨(dú)立的應(yīng)用，都是可以獨(dú)立部署獨(dú)立運(yùn)行，現(xiàn)在需要將這些應(yīng)用組合在一起，形成一個新的應(yīng)用，就遇到這個關(guān)于圖標(biāo)的問題。

由于原先各個應(yīng)用都是獨(dú)立部署，所以項(xiàng)目中就直接引用了 iconfont 中的字體，命名也都叫 iconfont，一旦將這些組件組合到一起，命名沖突之外，字體中的 unicode 也會沖突。

問題二：icon 圖標(biāo)庫沒交接

由于 icon 圖標(biāo)庫都是各個應(yīng)用的前端開發(fā)者維護(hù)的，他們都在自己的用戶名下建立項(xiàng)目， iconfont 圖標(biāo)庫在 git 倉庫之外，在人員變動的情況下，圖標(biāo)庫的權(quán)限往往會忘記交接。

問題三： iconfont 維護(hù)

正巧遇到 iconfont 維護(hù)，到目前為止雖然可以使用，但是想要上傳新的圖標(biāo)還是不行。

如何解決？

問題一：全局替換

最簡單的方式是各個應(yīng)用全局替換加前綴。

- <span class="iconfont icon-xxx"></span>
+ <span class="appAiconfont appAicon-xxx"></span>

這樣做當(dāng)然沒問題，但是到低代碼平臺那邊就會加載 n 個字體文件，并且都是包含整個應(yīng)用的字體，這就失去了使用 iconfont 的優(yōu)勢。

問題二：要回權(quán)限

雖然我們可以要回離職人員 iconfont 中項(xiàng)目的權(quán)限，短期可以解決項(xiàng)目上圖標(biāo)使用的問題，但是這個問題還是會有存在的可能。

問題三：力所不及

iconfont 目前也遇到了較大的問題，到目前為止還無法上傳文件，對于我們這些 iconfont 的使用者來說只有等待。

最終方案：使用 svg 代替 iconfont

使用 svg 的優(yōu)勢

• 完全離線化使用，不需要從 CDN 下載字體文件，圖標(biāo)不會因?yàn)榫W(wǎng)絡(luò)問題呈現(xiàn)方塊，也無需字體文件本地部署。
• 沒有 unicode，不會因?yàn)槌殡x組件而造成圖標(biāo)沖突
• 在低端設(shè)備上 SVG 有更好的清晰度。
• 支持多色圖標(biāo)。
• svg 可以支持動畫

目前流行的組件庫已經(jīng)都使用了 svg 代理字體圖標(biāo)，比如 ant-design、Material-UI 等

將引用的 iconfont 轉(zhuǎn)變?yōu)楸镜?svg

我們可以手動一個一個從 iconfont 圖標(biāo)庫中下載 svg，但這樣做未免有些過于麻煩。

在 iconfont 字體樣式中，css 包含了這樣一個路徑，或者我們可以在項(xiàng)目 css 中直接找到這段代碼，然后下載這個 svg。 打開 svg 會看到如下代碼

一個 glyph 元素定義了 SVG 字體中的一個獨(dú)立的字形，所以我們可以通過一個 node 腳本將這里面的獨(dú)立字形轉(zhuǎn)變 svg

直接上代碼

const cheerio= require("cheerio")
const fs= require("fs")
const path= require("path")
fs.readFile(path.join(__dirname,'./iconfont.svg'), 'utf8', function(err, data) {
    if (err) throw err;
    //console.log(data)
        const $=cheerio.load(data)
        $('glyph').each((index,item)=>{
            const svgStr=`<svg  fill="currentColor" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" width="128" height="128">
    <path d="${item.attribs.d}"></path>
</svg>`
        fs.writeFile(path.join(__dirname,`./svg/${item.attribs['glyph-name']}.svg`),svgStr,(err,data)=>{
            if (err) throw err;
        })
    });
});

cheerio 是一個 nodejs 下類似 jquery api， 主要是利用 cheerio 將字符串中的 d 和 glyph-name 寫到一個 svg 文件中。 iconfont 中的字體圖標(biāo)大家都是 1024 所以，設(shè)置viewBox="0 0 1024 1024"。

看下效果

這下，可以不用問離職人員要 iconfont 權(quán)限了。

svg 轉(zhuǎn)為 React Component

在 webpack 中我們可以使用一個 叫 svgr 的 loader，它可以將 SVG 轉(zhuǎn)換為一個隨時可用的 React 組件。

首先使用 npm 安裝 @svgr/webpack

npm install @svgr/webpack --save-dev

然后在 webpack.config.js 中加入配置

const webpack = require('webpack');
module.exports = {
  entry: './src/index.js',
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.svg$/i,
        type: 'asset',
        resourceQuery: /url/, // *.svg?url
      },
      {
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        resourceQuery: { not: [/url/] }, // exclude react component if *.svg?url
        use: ['@svgr/webpack'],
      },
    ],
  },
}

使用方式

import svg from './assets/file.svg?url'
import Svg from './assets/file.svg'
const App = () => {
  return (
    <div>
      <img src={svg} width="200" height="200" />
      <Svg width="200" height="200" viewBox="0 0 3500 3500" />
    </div>
  )
}

通過使用 ?url 區(qū)分是否使用 url 的方式引用。

svgr 官網(wǎng)可以的 palayround 可以實(shí)時預(yù)覽轉(zhuǎn)換后的代碼

我們只需要啟動應(yīng)用程序，Webpack 就會自動完成轉(zhuǎn)換任務(wù)，再不需要再擔(dān)心 SVG 了。你可以將 SVG 文件放在 src/文件夾中的任何位置，并將它們作為 React 組件導(dǎo)入使用。

以上就是本文全部內(nèi)容，希望這篇文章對大家有所幫助，也可以參考我往期的文章或者在評論區(qū)交流你的想法和心得，歡迎一起探索前端。

以上就是Iconfont不能上傳如何維護(hù)Icon的詳細(xì)內(nèi)容，更多關(guān)于Icon維護(hù)上傳Iconfont的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論