svg-mask-icon
v2.0.2
Published
By using SVG files as masks, you can manage icon colors with CSS.
Downloads
32
Readme
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
\ | <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
import "svg-mask-icon";
or
- download ./dist-cdn/svg-mask-icon.js.
- 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>
Used as an image with alt text:
<svg-mask-icon
src="icon.svg"
aria-label="Text Label"
></svg-mask-icon>
or
<svg-mask-icon
src="icon.svg"
>Text Label (hidden)</svg-mask-icon>
Used as a decorative image:
<svg-mask-icon
src="icon.svg"
role="presentation"
aria-hiden="true"
></svg-mask-icon>