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-flags
and run:
npm i
npm run serve:dev
To build the component for production, run:
npm run build:prod
Check 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