@impactdk/svg

svg

This package is a compilation of different tools to transform SVGs including a binary to convert a folder into inline SVGs in TypeScript.

Usage

Example folder structure:

• icons/facebook.svg
• icons/this-is-a-subfolder/youtube.svg

Transform all svgs inside the icons folder with this command:

transform-svg ./icons ./generated.ts

Configuration

Optional watch flag to watch folder continuously for changes:

transform-svg ./icons ./generated.ts --watch

Optional path to SVGO config

transform-svg ./icons ./generated.ts --svgo='./svgo-config.json'

Config json file follows SVGO config standard:

[
    { "removeXMLNS": true },
    { "removeViewBox": false },
    { "removeDimensions": true }
]

Output

Example contents of the outputted file generated.ts:

export const facebook =
    '<svg #facebook class="svg-facebook svg-icon" viewBox="0 0 50 50"><circle fill="#FED00F" cx="25" cy="25" r="25"/><path fill="#33363B" d="M29 15h3.5c.3 0 .5-.2.5-.5v-4c0-.3-.2-.5-.5-.5h-4c-3.7 0-6.5 2.8-6.5 6.5V21h-4.5c-.3 0-.5.2-.5.5v4c0 .3.2.5.5.5H22v13.5c0 .3.2.5.5.5h4c.3 0 .5-.2.5-.5V26h4.5c.2 0 .4-.2.5-.4l1-4c0-.1 0-.3-.1-.4-.1-.1-.2-.2-.4-.2H27v-4c0-1.1.9-2 2-2z"/></svg>';
export const thisIsASubfolderYoutube =
    '<svg #thisIsASubfolderYoutube class="svg-this-is-a-subfolder-youtube svg-icon" viewBox="0 0 32 32"><path fill="#444" d="M31.7 9.6s-.3-2.2-1.3-3.2c-1.2-1.3-2.6-1.3-3.2-1.4-4.5-.3-11.2-.3-11.2-.3s-6.7 0-11.2.3c-.6.1-2 .1-3.2 1.4C.6 7.4.3 9.6.3 9.6S0 12.2 0 14.8v2.4c0 2.6.3 5.2.3 5.2s.3 2.2 1.3 3.2c1.2 1.3 2.8 1.2 3.5 1.4 2.6.2 10.9.3 10.9.3s6.7 0 11.2-.3c.6-.1 2-.1 3.2-1.4 1-1 1.3-3.2 1.3-3.2s.3-2.6.3-5.2v-2.4c0-2.6-.3-5.2-.3-5.2zm-19 10.6v-9l8.6 4.5-8.6 4.5z"/></svg>';