svg-mask-icon

English | 日本語

Very simple Web Components that uses CSS mask-image. It allows you to specify the color of local SVG icons using CSS, similar to icon fonts.

Table of Contents

• Preview
• Comparison
• Installation
• Usage

Preview

Demo Page.

Comparison

\	<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. It has display issues when using browser translation.

<svg>...</svg>

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

and

import "svg-mask-icon";

or

1. download ./dist-cdn/svg-mask-icon.js.
2. load script in your html.

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

or

load script from CDN.

<script type="module" src="https://cdn.jsdelivr.net/npm/svg-mask-icon/dist-cdn/svg-mask-icon.min.js"></script>

Usage

basic:

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

or use Short hand:

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

Used as an image with alt text:

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

or

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

or

<svg-icon src="icon.svg" alt="Text Label">

Used as a decorative image:

<svg-icon
  src="icon.svg"
  role="presentation"
/>

or No alt text

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

→ It will be rendered like this

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