ec8da8f12c
Co-authored-by: Mikhail Bashkirov <mikhail.bashkirov@ing.com> Co-authored-by: Thijs Louisse <thijs.louisse@ing.com> Co-authored-by: Joren Broekema <joren.broekema@ing.com> Co-authored-by: Gerjan van Geest <gerjan.van.geest@ing.com> Co-authored-by: Erik Kroes <erik.kroes@ing.com> Co-authored-by: Lars den Bakker <lars.den.bakker@ing.com>
76 lines
1.4 KiB
Markdown
76 lines
1.4 KiB
Markdown
# Icon
|
||
|
||
[//]: # (AUTO INSERT HEADER PREPUBLISH)
|
||
|
||
A web component for displaying icons.
|
||
|
||
## How to use
|
||
|
||
### Installation
|
||
|
||
```sh
|
||
npm i --save @lion/icon
|
||
```
|
||
|
||
```js
|
||
import '@lion/icon/lion-icon.js';
|
||
```
|
||
|
||
### Basic usage
|
||
|
||
Include the import for both the custom element the icons you want:
|
||
|
||
```html
|
||
<script type="module">
|
||
import 'lion-icon/lion-icon.js';
|
||
import bugSvg from '../icons/bug.svg.js';
|
||
</script>
|
||
```
|
||
|
||
Use it in your lit-html template:
|
||
```html
|
||
<lion-icon .svg=${bugSvg}></lion-icon>
|
||
```
|
||
|
||
### Accessibiltiy
|
||
|
||
You may add an `aria-label` to provide information to visually impaired users:
|
||
|
||
```html
|
||
<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:
|
||
|
||
```html
|
||
<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`:
|
||
|
||
```html
|
||
<style>
|
||
lion-icon.strong {
|
||
fill: azure;
|
||
stroke: lightsteelblue;
|
||
}
|
||
</style>
|
||
<lion-icon .icon=${arrowSvg} class="strong"></lion-icon>
|
||
```
|
||
|
||
See [SVG and CSS](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS) on MDN web docs for more information.
|