跳至内容
Font Awesome 文档
欢迎 Web Awesome，最棒的开源 Web 组件库。
立即预订！

SVG 核心插件

SVG 核心库包含一个插件架构，因此您可以仅使用所需的特性来限制文件大小并提高性能。

Font Awesome 功能强大

以下是插件

插件名称功能
InjectCSS将 CSS 添加到页面 <head> 中，这些 CSS 是显示图标所需的
ReplaceElements用 <svg> 图标替换 <i> 元素
Layers支持 层
LayersCounter支持 层计数器
LayersText支持 层文本
PseudoElements支持 伪元素
MutationObserver监视页面（DOM）以进行更改，并将元素（i 替换为 svg）
PowerTransforms支持 强大的转换
Masks支持 蒙版
MissingIconIndicator使用动画指示器标记缺失的图标
SvgSymbols支持 SVG 符号

当您从 @fortawesome/fontawesome-svg-core 中导入任何内容时，它会附带所有功能。

但是，只需稍作更改，您就可以选择要使用的插件。如果您没有浪费时间做不必要的事情，这将节省字节并提高性能。

示例

此示例使用 Rollup.js，但相同的原理适用于大多数其他使用 Webpack 或 ESBuild 等工具的项目。

终端窗口
mkdir fa-lite
cd fa-lite
npm init -y

这将在 fa-lite 中创建一个 package.json 文件。

接下来是为 Rollup 和 Font Awesome 安装一些依赖项。（别惊讶，你猜到我们要安装一些依赖项，对吧？）

终端窗口
npm install --save-dev rollup @rollup/plugin-node-resolve rollup-plugin-terser
npm i --save-dev @fortawesome/fontawesome-svg-core
npm i --save-dev '@awesome.me/kit-KIT_CODE'

创建 src/fontawesome.js

import { library, dom } from '@fortawesome/fontawesome-svg-core'
import { all } from '@awesome.me/kit-KIT_CODE/icons'


library.add(...all)


window.addEventListener('DOMContentLoaded', () => {
  dom.i2svg()
  dom.watch()
})

创建 rollup.config.js

import resolve from '@rollup/plugin-node-resolve'


const plugins = [resolve()]


export default [
  {
    input: 'src/fontawesome.js',
    output: {
      file: 'dist/fontawesome.js',
      format: 'esm'
    },
    plugins
  }
]

在当前目录中打开一个终端，我们将使用 --watch 运行 Rollup

终端窗口
npx rollup -c rollup.config.js --watch
终端窗口
rollup v2.56.3
bundles src/fontawesome.js → dist/fontawesome.js...
created dist/fontawesome.js in 536ms


[2021-09-13 15:03:39] waiting for changes...

创建 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="dist/fontawesome.js" type="module"></script>
  </head>
  <body>
    <i class="fas fa-alien"></i>
  </body>
</html>

在当前目录中打开另一个终端，我们将运行一个小型 HTTP 服务器

终端窗口
npm install --save-dev http-server
npx http-server
终端窗口
Starting up http-server, serving ./


http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none


Available on:
  http://127.0.0.1:8080
  http://127.51.68.120:8080
  http://192.168.4.22:8080
  http://192.168.4.42:8080
Hit CTRL-C to stop the server

在浏览器中加载它以查看外星人图标。

切换到插件

虽然图标已经进行了子集化，但您仍然包含了 Font Awesome 提供的所有特性。

接下来创建 src/fontawesome-lite.js

import {
  register,
  InjectCSS,
  ReplaceElements
} from '@fortawesome/fontawesome-svg-core/plugins'


const api = register([InjectCSS, ReplaceElements])


import { all } from '@awesome.me/kit-KIT_CODE/icons'


api.library.add(...all)


window.addEventListener('DOMContentLoaded', () => {
  api.dom.i2svg()
  api.dom.watch()
})

修改 rollup.config.js

import resolve from '@rollup/plugin-node-resolve'


const plugins = [
resolve()
]


if (process.env.NODE_ENV === 'production') {
  plugins.push(require('rollup-plugin-terser').terser())
}


export default [
{
  input: 'src/fontawesome.js',
  output: {
    file: 'dist/fontawesome.js',
    format: 'esm'
  },
  plugins
},
{
  input: 'src/fontawesome-lite.js',
  output: {
    file: 'dist/fontawesome-lite.js',
    format: 'esm'
  },
  plugins
}
]

由于我们更改了 rollup.config.js，因此我们需要停止并重新启动。键入CTRL+C，然后再次运行 Rollup。

终端窗口
npx rollup -c rollup.config.js --watch

更改 dist/fontawesome.js 以使用我们的 dist/fontawesome-lite.js 版本

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="dist/fontawesome-lite.js" type="module"></script>
  </head>
  <body>
    <i class="fas fa-alien"></i>
  </body>
</html>

预期

比较使用插件系统之前和之后的

文件名大小
dist/fontawesome.js61k
dist/fontawesome-lite.js45k

哇塞！节省了 16k。使用“lite”可能有点慷慨，但我们会随着时间的推移不断改进此 API。这种架构也有望在未来为 Font Awesome 开启一些新的可能性。