https://github.com/uiwebkit/icons
Uni Icons Kit
https://github.com/uiwebkit/icons
custom-elements html icons icons-pack spin stencil stenciljs uni-icons-kit web web-components webcomponents
Last synced: 8 months ago
JSON representation
Uni Icons Kit
- Host: GitHub
- URL: https://github.com/uiwebkit/icons
- Owner: uiwebkit
- License: mit
- Created: 2020-10-28T18:22:13.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-09-13T12:25:05.000Z (about 2 years ago)
- Last Synced: 2025-01-29T02:09:51.709Z (8 months ago)
- Topics: custom-elements, html, icons, icons-pack, spin, stencil, stenciljs, uni-icons-kit, web, web-components, webcomponents
- Language: TypeScript
- Homepage: https://uiwebkit.com/icn/1/
- Size: 6.79 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# 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:
```bash
git clone https://github.com/uiwebkit/icn.git uni-icons
cd uni-icons
```
and run:
```bash
npm i
npm run serve:dev
```
To build the component for production, run:
```bash
npm run build:prod
```
Check out our docs [here](https://uiwebkit.com/icn/1).
## Naming Components
When creating new component tags, use `uni` in the component name (ex: ``) 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 `` in the head of your index.html
- To support old browsers, also put a script tag `` 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 `` in the head of your index.html
- To support old browsers, also put a script tag `` in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc