ayo/lion

History

CircleCI 90e6b4ef36 chore: release new versions - @lion/ajax@0.1.19 - @lion/button@0.3.35 - @lion/calendar@0.3.0 - @lion/checkbox-group@0.2.0 - @lion/checkbox@0.2.0 - @lion/choice-input@0.3.0 - @lion/core@0.3.0 - @lion/field@0.4.0 - @lion/fieldset@0.2.0 - @lion/form-system@0.1.0 - @lion/form@0.2.0 - @lion/icon@0.2.9 - @lion/input-amount@0.2.0 - @lion/input-date@0.2.0 - @lion/input-datepicker@0.3.0 - @lion/input-email@0.2.0 - @lion/input-iban@0.2.0 - @lion/input@0.2.0 - @lion/localize@0.5.0 - @lion/option@0.2.10 - @lion/overlays@0.6.3 - @lion/popup@0.3.12 - @lion/radio-group@0.2.0 - @lion/radio@0.2.0 - @lion/select-rich@0.4.0 - @lion/select@0.2.0 - @lion/steps@0.2.0 - @lion/switch@0.2.0 - @lion/tabs@0.1.1 - @lion/textarea@0.2.0 - @lion/tooltip@0.3.12 - @lion/validate@0.3.0		2019-11-13 10:07:10 +00:00
..
src	fix(icon): render nothing consistently when svg is null	2019-09-16 19:51:01 +02:00
stories	chore: add storybook addon for a11y and fix violations	2019-11-13 11:01:37 +01:00
test	fix(icon): render nothing consistently when svg is null	2019-09-16 19:51:01 +02:00
CHANGELOG.md	chore: release new versions	2019-11-13 10:07:10 +00:00
index.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
lion-icon.js	feat: release inital public lion version	2019-04-26 10:37:57 +02:00
package.json	chore: release new versions	2019-11-13 10:07:10 +00:00
README.md	chore: fix style of markdown files	2019-07-24 15:20:19 +02:00

Icon

A web component for displaying icons.

How to use

npm i --save @lion/icon

import '@lion/icon/lion-icon.js';

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>

Icon file is an ES module with an extension .svg.js which exports a function like this:

// bug.svg.js
export default tag => tag`
  <svg focusable="false" ...>...</svg>
`;

Make sure you have focusable="false" in the icon file to prevent bugs in IE/Edge when the icon appears in tab-order.

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.

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>

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.