Uni Flags a set of Custom Elements to use Country flags icons in the declarative style.
Uni Flags 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 Flags components are just HTML Web Components & Custom Elements, so they work in any major framework or with no framework at all.
To start building a new web component using Stencil, clone this repo to a new directory:
git clone https://github.com/uiwebkit/flags.git uni-flags
cd uni-flagsand run:
npm i
npm run serve:devTo build the component for production, run:
npm run build:prodCheck out our docs here.
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.
There are two strategies we recommend for using Uni Flags:
- Put a script tag
<script type="module" src="https://cdn.jsdelivr.net/npm/@uiwebkit/flag@latest/dist/flag/flag.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/flag@latest/dist/flag/flag.js"></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc
- Run
npm i @uiwebkit/flag --save - Put a script tag similar to this
<script type="module" src="node_modules/@uiwebkit/flag/dist/flag/flag.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/flag/dist/flag/flag.js"></script>in the head of your index.html - Then you can use the element anywhere in your template, JSX, html etc