使用 Iconify Utils 导出 SVG

本教程属于 Iconify Utils 代码示例 的一部分。

导出 SVG

以下是使用 Iconify Utils 从图标集生成 SVG 的示例：

demo.ts

tsimport type { IconifyJSON } from '@iconify/types';
import { readFileSync, writeFileSync, mkdirSync } from 'fs';

// Various functions from Iconify Utils
import { parseIconSet, iconToSVG } from '@iconify/utils';

// Source file and target directory
const source = 'icon-sets/mdi-light.json';
const target = 'svg/mdi-light';

// Read icon set from file
const iconSet = JSON.parse(readFileSync(source, 'utf8')) as IconifyJSON;

// Create directory for output if it does not exist
try {
   mkdirSync(target, {
       recursive: true,
   });
} catch {}

// Parse all icons
parseIconSet(iconSet, (name, data) => {
   if (!data) {
       // Invalid icon
       return;
   }

   // Generate SVG
   const renderData = iconToSVG(data, {
       // 'auto' keyword uses viewBox width/height for icon width/height
       height: 'auto',
   });

   // Generate attributes for SVG element
   const svgAttributes = {
       xmlns: 'http://www.w3.org/2000/svg',
       ...renderData.attributes,
   } as Record<string, string>;
   const svgAttributesStr = Object.keys(svgAttributes)
       .map(
           (attr) =>
               // No need to check attributes for special characters, such as quotes,
               // they cannot contain anything that needs escaping.
               `${attr}="${svgAttributes[attr as keyof typeof svgAttributes]}"`
       )
       .join(' ');

   // Generate SVG
   const svg = `<svg ${svgAttributesStr}>${renderData.body}</svg>`;

   // Write SVG
   const filename = `${target}/${name}.svg`;
   writeFileSync(filename, svg, 'utf8');
   console.log('Written:', filename);
});

函数

本代码示例中使用的函数：

• parseIconSet() 用于解析图标集，并为每个图标调用回调函数。
• iconToSVG() 用于生成 SVG 的属性和 HTML。
• replaceIDs() 用于创建唯一 ID，尽管在此示例中已被注释。若需将输出嵌入 HTML 中，请使用此函数。

来源

关于图标集来源，本示例使用 IconifyJSON 格式的 .json 文件。

你也可以使用独立图标集包或完整图标集包。将 source 变量指向这些包中的 .json 文件即可。

输出

本示例将所有 SVG 写入文件系统。更改 target 变量以指向其他目录。