https://github.com/psephopaiktes/svg-mask-icon

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.
https://github.com/psephopaiktes/svg-mask-icon

icon-font icons web-components webcomponents

Last synced: 10 days ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/psephopaiktes/svg-mask-icon
• Owner: psephopaiktes
• License: mit
• Created: 2024-07-01T07:03:55.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2025-01-15T05:20:02.000Z (27 days ago)
• Last Synced: 2025-01-30T07:16:19.047Z (12 days ago)
• Topics: icon-font, icons, web-components, webcomponents
• Language: JavaScript
• Homepage:
• Size: 445 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# svg-mask-icon

English | [日本語](README.ja.md)

![Cover](./public/cover.gif)

Very simple **Web Components** that uses [CSS mask-image](https://developer.mozilla.org/docs/Web/CSS/mask-image). It allows you to specify the color of local SVG icons using CSS, similar to icon fonts.




## Table of Contents

- [Preview](#preview)

- [Comparison](#comparison)

- [Installation](#installation)

- [Usage](#usage)




## Preview

[Demo Page.](https://psephopaiktes.github.io/svg-mask-icon/)




## 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](https://fonts.google.com/icons) or [Font Awesome](https://fontawesome.com/). 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 ``. It has a complicated build process and is difficult to handle accessibility features like `aria-label`.




## Installation

```bash

npm i svg-mask-icon

```

```js

import "svg-mask-icon";

```

### or

1. download [./dist-cdn/svg-mask-icon.js](./dist-cdn/svg-mask-icon.js).

2. load script in your html.

```html

```

### or

load script from CDN.

```html

```




## Usage

### basic:

```html

```

### Used as an image with alt text:

```html

```

or

```html

Text Label (hidden)

```

### Used as a decorative image:

```html

```