Simpleicons Replacer

Replaces HTML i-Tags with SVG from simple-icons

Simply and easily replace all the uses of your simple-icons (over 2'400 available brand icons) with one line of JavaScript.

After installing the package with

npm i @kollektiv-kpunkt/simpleicons-replacer --save

simply import the class in your JS File and call the .replace() method.

import siReplacer from "@kollektiv-kpunkt/simpleicons-replacer";

const replacer = new siReplacer();
replacer.replace();

This method will replace all i-Tags with the data-si attributes in your html.

Examples

<i data-si="facebook"></i>

Returns:

<i data-si="signal"></i>

Returns:

<i data-si="threema"></i>

Returns:

Find the entire iconset at simpleicons.org

Styles

The following styles applied to the i-Tag will be copied to the SVG:

• Display (default: "inline-block")
• Color (will be applied as fill; default "currentcolor")
• Width (default: 1rem)
• Height (default: 1rem)