116fbec47b
- @lion/ajax@0.1.0 - @lion/button@0.1.0 - @lion/checkbox-group@0.1.0 - @lion/checkbox@0.1.0 - @lion/choice-input@0.1.0 - @lion/core@0.1.0 - @lion/field@0.1.0 - @lion/fieldset@0.1.0 - @lion/form-system@0.0.1 - @lion/form@0.1.0 - @lion/icon@0.1.0 - @lion/input-amount@0.1.0 - @lion/input-date@0.1.0 - @lion/input-email@0.1.0 - @lion/input-iban@0.1.0 - @lion/input@0.1.0 - @lion/localize@0.1.0 - @lion/overlays@0.1.0 - @lion/popup@0.1.0 - @lion/radio-group@0.1.0 - @lion/radio@0.1.0 - @lion/select@0.1.0 - @lion/steps@0.1.0 - @lion/textarea@0.1.0 - @lion/tooltip@0.1.0 - @lion/validate@0.1.0 |
||
|---|---|---|
| .. | ||
| src | ||
| stories | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-icon.js | ||
| package.json | ||
| README.md | ||
Icon
A web component for displaying icons.
How to use
Installation
npm i --save @lion/icon
import '@lion/icon/lion-icon.js';
Basic usage
Include the import for both the custom element the icons you want:
<script type="module">
import 'lion-icon/lion-icon.js';
import bugSvg from '../icons/bug.svg.js';
</script>
Use it in your lit-html template:
<lion-icon .svg=${bugSvg}></lion-icon>
Accessibiltiy
You may add an aria-label to provide information to visually impaired users:
<lion-icon .svg=${arrowLeftSvg} aria-label="Pointing left"></lion-icon>
A lion-icon without an aria-label attribute will be automatically be given an aria-hidden attribute.
Styling
Dimensions
By default, a lion-icon will be 1em × 1em (the current line-height).
A lion-icon may be styled like a regular HTML element:
<style>
lion-icon.big {
width: 3rem;
height: 3rem;
}
</style>
SVG Styling
lion-icon uses SVGs and may be styled with CSS, using CSS properties such as fill and stroke:
<style>
lion-icon.strong {
fill: azure;
stroke: lightsteelblue;
}
</style>
<lion-icon .icon=${arrowSvg} class="strong"></lion-icon>
See SVG and CSS on MDN web docs for more information.