Appearance

使用 Iconify Utils 导出 SVG ​

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

导出 SVG ​

这是一个使用 Iconify Utils 从图标数据生成 SVG 的示例：

demo.ts
tsimport type { IconifyIcon } from '@iconify/types';
import { iconToSVG/* , replaceIDs */ } from '@iconify/utils';

// Icon data in IconifyIcon format
const data: IconifyIcon = {
   body: '<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>',
   width: 24,
   height: 24,
};

// Generate data for rendering SVG
const renderData = iconToSVG(data, { height: 'auto' });

/*

Result of iconToSVG() can be used to either generate HTML code or to use in various components

renderData = {
 attributes: {
   width: '24',
   height: '24',
   viewBox: '0 0 24 24'
 },
 body: '<path d="M16 8.414l-4.5-4.5L4.414 11H6v8h3v-6h5v6h3v-8h1.586L17 9.414V6h-1v2.414zM2 12l9.5-9.5L15 6V5h3v4l3 3h-3v7.998h-5v-6h-3v6H5V12H2z" fill="currentColor"/>'
}

*/

// Generate attributes for SVG element
const svgAttributes: Record<string, string> = {
   xmlns: 'http://www.w3.org/2000/svg',
   ...renderData.attributes,
};
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>`;

/*

Many icons have elements with unique IDs, such as masks. IDs are meant to be unique.
If generated icon is embedded in HTML, it cannot have IDs that might be present in
another icon. To solve that, replace IDs in content with randomly generated IDs
using replaceIDs():

const svg = `<svg ${svgAttributesStr}>${replaceIDs(renderData.body)}</svg>`;

Uncomment import for replaceIDs() at start of this example.

*/

// Log SVG
console.log(svg);

函数 ​

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

  • iconToSVG() 用于生成 SVG 的属性和 HTML。
  • replaceIDs() 用于创建唯一 ID，尽管在此示例中已被注释掉。如果您要将输出嵌入到 HTML 中，请使用它。

来源 ​

对于图标数据源，本示例使用了硬编码的 IconifyIcon 数据。

您可以从 拆分图标集包 中导入单个图标。

输出 ​

本示例将 SVG 输出到控制台。

如果您需要将其写入文件，请使用文件系统函数，例如 writeFileSync() 或其异步版本之一。