fromSVG()

This function is part of IconSet class in Iconify Tools.

Function fromSVG() imports icon from SVG instance to IconSet icon set. It can be used to add a new icon or replace an existing icon.

Usage

Function has the following parameters:

• name, string. Icon name.
• svg, SVG. SVG instance.

Function returns true on success, false on failure.

Example

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>