toSVG()

此函数属于 Iconify Tools 中的 IconSet 类。

函数 toSVG() 将图标导出为 SVG 实例。

它用于配合处理 SVG 实例的函数来对图标进行处理。

重要提示

SVG 实例与图标集不同步。

修改图标后，您需要使用 fromSVG() 方法更新 IconSet 中的条目。

用法

该函数包含以下参数：

• name，string 类型。图标名称。

函数在成功时返回 SVG 实例，出错时返回 null。

示例

example.ts

tsimport { blankIconSet, parseColors, isEmptyColor } from '@iconify/tools';

// Create an icon set, add one icon
const iconSet = blankIconSet('');
iconSet.setIcon('add', {
   body: '<path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z"/>',
});

// Export icon to SVG class instance
// Note: SVG instance is not attached to icon set, so it is not updated automatically (see code below).
const svg = iconSet.toSVG('add');
if (!svg) {
   throw new Error('Icon is missing');
}

// Set fill to 'currentColor'
parseColors(svg, {
   // If a shape uses default color (used in this example), change it to 'currentColor'.
   defaultColor: 'currentColor',

   // Callback to change colors. Not called in this example because there are no colors in sample icon.
   callback: (attr, colorStr, color) => {
       // color === null -> color cannot be parsed -> return colorStr
       // isEmptyColor() -> checks if color is empty: 'none' or 'transparent' -> return color object
       //         without changes (though color string can also be returned, but using object is faster)
       // for everything else return 'currentColor'
       return !color ? colorStr : isEmptyColor(color) ? color : 'currentColor';
   },
});

// Icon instance is not attached to icon set, so it is not updated automatically.
// Update icon in icon set
iconSet.fromSVG('add', svg);

// Log to show icon (two ways to do it, one from icon set, one from icon instance)
console.log(svg.toString());
console.log(iconSet.toString('add'));

Result:

svg<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16"><path d="M14 7v1H8v6H7V8H1V7h6V1h1v6h6z" fill="currentColor"/></svg>