Appearance

使用 Iconify Utils 生成 SVG ​

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

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

流程 ​

工作原理：

  • 加载图标集数据。
  • 将图标导出为 SVG 文件。

最终，您将得到数千个 SVG 文件，可以将它们嵌入到 HTML 中。

如何将 SVG 嵌入 HTML 取决于您的项目。如果无法实现自动化，只需将 .svg 文件中的代码复制/粘贴到您想要使用图标的 .html 文件中即可。

Node.js ​

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

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

  • 在您的计算机上安装 Node.js。
  • 为项目创建目录，运行 npm init -y 进行初始化。

依赖项 ​

您需要安装 2 个依赖项：

要安装它们，请运行

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

脚本 ​

这里有两个示例脚本，请根据您的用例选择更合适的一个：

  • 将图标集中的所有图标导出为 .svg 文件的脚本。
  • 包含为选定图标生成 SVG 功能的脚本。

导出所有图标 ​

此脚本将图标集中的所有图标导出为 .svg 文件。

生成 SVG 文件的流程很简单：

  • 加载图标集。
  • 解析它以列出所有图标。
  • 在回调中为每个图标生成 .svg 文件。
jsimport { mkdir, readFile, writeFile } from 'node:fs/promises';
import { iconToSVG, iconToHTML, parseIconSetAsync } from '@iconify/utils';
import { locate } from '@iconify/json';

/**
* Dimensions of generated SVG:
* - '1em' -> 1em, easy to resize icons with font-size.
* - 'auto' -> same as icon's viewBox.
* - 'unset' -> no width/height in generated icons. You'll need to assign width and height in CSS.
*/
const height = '1em';

/**
* List of icon sets you want to export
*
* @type {string[]}
*/
const prefixes = ['mdi', 'mdi-light'];

/**
* Output directory for SVG
*/
const target = 'assets/svg';

// Parse each icon set
for (let i = 0; i < prefixes.length; i++) {
   const prefix = prefixes[i];

   // 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'));

   // Create output directory if it doesn't exist
   const outDir = `${target}/${prefix}`;
   try {
       await mkdir(outDir, {
           recursive: true,
       });
   } catch {}

   // Get all icons
   let counter = 0;
   await parseIconSetAsync(iconSet, async (name, data) => {
       if (!data) {
           // Failed icon
           return;
       }

       // Generate SVG
       const { attributes, body } = iconToSVG(data, {
           height,
       });
       const svg = iconToHTML(body, attributes);

       // Save it
       await writeFile(`${outDir}/${name}.svg`, svg, 'utf8');
       counter++;
   });

   // Log it
   console.log(`Exported ${counter} icons from ${iconSet.info?.name || prefix}`);
}

修改选项后运行它，即可导出 SVG 文件。

示例中使用的 Iconify Utils 函数：

获取图标的 SVG ​

此脚本为选定的图标生成 SVG。

您可以在构建过程中使用该函数来生成 SVG，然后将其嵌入到 HTML 中。

生成 SVG 的流程：

  • 加载图标集。
  • 获取选定图标的数据。
  • 生成 SVG。
jsimport { readFileSync } from 'node:fs';
import { iconToSVG, iconToHTML, getIconData } from '@iconify/utils';
import { locate } from '@iconify/json';

/**
* Default dimensions of generated SVG:
* - '1em' -> 1em, easy to resize icons with font-size.
* - 'auto' -> same as icon's viewBox.
* - 'unset' -> no width/height in generated icons. You'll need to assign width and height in CSS.
*/
const height = '1em';

/**
* Generate SVG
*
* @param {string} prefix Icon set prefix
* @param {string} name Icon name
* @param {import("@iconify/utils").IconifyIconCustomisations} customisations Optional icon customisations
* @returns {string | undefined} SVG as string, undefined on failure
*/
export function generateSVG(prefix, name, customisations = { height }) {
   // Find and load icon set
   const filename = locate(prefix);

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

   // Get icon data
   const data = getIconData(iconSet, name);
   if (!data) {
       return;
   }

   // Generate SVG
   const { attributes, body } = iconToSVG(data, {
       height,
   });
   return iconToHTML(body, attributes);
}

// Sample usage
console.log(generateSVG('mdi-light', 'home'));

示例中使用的 Iconify Utils 函数：