ayo/lion

Mikhail Bashkirov a6b0780d4f feat(icon): enforce icon security using tagged templates

BREAKING: Icon definition requires a function using a tag passed via arguments:

```js
// myicon.svg.js

// before
export default '<svg>...</svg>';

// after
export default tag => tag`<svg>...</svg>`;
```

Application developers have an alternative shortcut to use in-place with lit-html:

```js
// MyComponent.js

// before
render() {
  return html`
    <lion-icon .svg="${'<svg>...</svg>'}"></lion-icon>
  `;
}

// after
render() {
  return html`
    <lion-icon .svg="${html`<svg>...</svg>`}"></lion-icon>
  `;
}
```

2019-07-01 17:48:05 +02:00

1.7 KiB

Raw Blame History

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>

Icon format

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.

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.

1.7 KiB Raw Blame History Unescape Escape