Appearance

使用 Iconify Utils 为图标生成 CSS ​

此方法需要编写少量代码，并使用 Node.js。

如果您不使用 Node.js 或不熟悉以下代码， 请考虑其他为图标生成 CSS 的方法。

Node.js ​

如果您还没有 Node.js 应用，则需要创建一个来生成 CSS。

关于 Node.js 工作原理的教程有很多，简要步骤如下：

  • 在您的计算机上安装 Node.js。
  • 创建一个空目录，运行 npm init -y 以创建基础项目。

依赖项 ​

您需要安装两个依赖项：

要安装它们，请运行

npm install --save-dev @iconify/utils @iconify/json

函数 ​

Iconify Utils 提供了几个用于为图标生成 CSS 的函数：

本教程展示了如何使用 getIconsCSS()，它适用于大多数使用场景。

构建脚本 ​

构建 CSS 的过程很简单：

  • 加载图标集。
  • 为该图标集中您需要的图标生成 CSS。
  • 将其保存到 .css 文件中。
jsimport { readFile, writeFile } from 'node:fs/promises';
import { getIconsCSS } from '@iconify/utils';
import { locate } from '@iconify/json';

/**
* List of icons. Key is icon set prefix, value is array of icons
*
* @type {Record<string, string[]>}
*/
const icons = {
   'mdi': ['home', 'menu'],
   'mdi-light': ['alert-circle', 'circle', 'help-circle'],
};

// Parse each icon set
let code = '';
for (const prefix in icons) {
   // Find location of .json file
   const filename = locate(prefix);

   // Load file and parse it
   /** @type {import("@iconify/types").IconifyJSON} */
   const iconSet = JSON.parse(await readFile(filename, 'utf8'));

   // Get CSS
   const css = getIconsCSS(iconSet, icons[prefix]);

   // Add it to code
   code += css;
}

// Save CSS file
await writeFile('assets/style.css', code, 'utf8');
console.log(`Saved CSS (${code.length} bytes)`);

修改图标列表和 .css 文件的位置，然后运行它以构建 CSS。

使用方法 ​

要在 HTML 中使用这些图标，请使用带有两个类名的 <span> 元素： 图标集的类名，以及图标的类名。

html<span class="icon--mdi-light icon--mdi-light--alert-circle"></span>

选项 ​

getIconsCSS() 提供了可用于自定义生成 CSS 的选项。

请参阅 getIconsCSS() 文档。