@uiwebkit/icn

Uni Icons Kit

Uni Icons Kit is a set of Web Components & Custom Elements to use Material Design Icons, Bootstrap Icons, Font Awesome Icons and Country flags in the declarative style.

Uni Icons Kit components have two modes:

1. Custom Element - 100% convenience;
2. Web Component - 100% security;
3. Custom Element Wrapper - 100% customization;

Uni Icons Kit takes TypeScript, JSX, a tiny virtual DOM layer, efficient one-way data binding, an asynchronous rendering pipeline (similar to React Fiber), and lazy-loading out of the box, and generates 100% standards-based Web Components & Custom Elements that run in any browser supporting the Custom Elements v1 spec.

Uni Icons Kit components are just HTML Web Components & Custom Elements, so they work in any major framework or with no framework at all.

Getting Started

To start building a new web component using Stencil, clone this repo to a new directory:

git clone https://github.com/uiwebkit/icn.git uni-icons
cd uni-icons

and run:

npm i
npm run serve:dev

To build the component for production, run:

npm run build:prod

Check out our docs here.

Naming Components

When creating new component tags, use uni in the component name (ex: <uni-flag>) or use a prefix that fits your company or any name for a group of related components. For example, all the UiWebKit generated Web Components & Custom Elements use the prefix uni.

Using Components

There are two strategies we recommend for using Uni Icons Kit:

Script tag

• Put a script tag <script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/icn@latest/dist/icn/icn.esm.js"></script> in the head of your index.html
• To support old browsers, also put a script tag <script nomodule src="https://cdn.jsdelivr.net/npm/@uiwebkit/icn@latest/dist/icn/icn.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm i @uiwebkit/icn --save
• Put a script tag similar to this <script type="module" src="node_modules/@uiwebkit/icn/dist/icn/icn.esm.js"></script> in the head of your index.html
• To support old browsers, also put a script tag <script nomodule src="node_modules/@uiwebkit/icn/dist/icn/icn.js"></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc