svg-mask-icon

This is a Web Component that uses CSS mask-image. It allows you to specify the color of local SVG icons using CSS, similar to icon fonts.

Features

• Bundle size is about 1kb.
• Ability to change color and size using CSS

Comparison

Matrix

\ | <svg-mask-icon> | <img> | Icon Font | <svg> | SVG Sprite --:|:--:|:--:|:--:|:--:|:--: CSS Color | ✅ | - | ✅ | ✅ | ✅ load .svg files | ✅ | ✅ | - | - | - no build process | ✅ | ✅ | - | ✅ | - simple HTML | ✅ | ✅ | ✅ | - | - browser translate | ✅ | ✅ | - | ✅ | ✅ A11y label | ✅ | ✅ | ✅ | - | -

🏞️ <img src="icon.svg" />

When using the img tag, you cannot change the color of the icon using CSS.

🅰️ Icon Font

This method uses font data like Material Symbol or Font Awesome. It has a complex build process and may cause display issues when using browser translation.

🖋️ <svg />...</svg>

This is the method of directly writing the svg tag. It can make the HTML complex and inconvenient. Also, it cannot be managed in the form of .svg files.

📁 SVG Sprite

This is the method of creating an SVG sprite and specifying it using <use>. It has a complicated build process and is difficult to handle accessibility features like aria-label.

Installation

npm i svg-mask-icon

import "svg-mask-icon";

or

download ./dist/svg-mask-icon.js.

<script type="module" src="svg-mask-icon.js"></script>

Usage

basic:

<svg-mask-icon src="icon.svg" />

Used as a decorative image:

<svg-mask-icon
    src="icon.svg"
    role="presentation"
    aria-hiden="true"
></svg-mask-icon>

Used as an image with alt text:

<svg-mask-icon
    src="icon.svg"
    role="img"
    aria-label="Text Label"
></svg-mask-icon>

or

<svg-mask-icon
    src="icon.svg"
    role="img"
>Text Label(hidden)</svg-mask-icon>