Aviala Design Icons

1.O.5

A customizable icon library
with 1OOO+ exquisite icons styles

* The total number of all styles of icons is 1000+.

Get started at

Installation

Install it with any npm package manager you like.

@aviala-design/icons

Import

Import All Icons

import { allIcons, getIcon } from 'all.js';

Import a certain Icon

import { Generic_home } from 'Generic_home.js';

Uesd

html

<aviala-icon name="user" mode="fill" color="#ff0000" class="medium-icon"></aviala-icon>

JavaScript

const icon = document.createElement('aviala-icon');
icon.setAttribute('name', 'user');
icon.setAttribute('mode', 'colorful');
icon.classList.add('medium-icon');
document.body.appendChild(icon);

Parameter

Note
The icon size needs to be adjusted through the font-size property in CSS. Default Size is 24px.

name

Required

It needs to be filled in with the name set when importing icons in JavaScript.

mode

Optional

Used to configure the icon style. The default is "outline". When the requested style does not exist, no icon will be displayed. The available styles of specific icons can be queried in the Icon List (Click the button in the lower right corner to make it display.)

color

Optional

Used to configure the icon color. It is only effective when the mode is "outline", "fill", or "black". More modes may be supported in the future.