ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(icon): update icon story for icon sets (#626)

Browse source 
* chore(icon): update docs (icon story for icon sets and readme)
This commit is contained in:
Thijs Louisse 2020-03-05 13:20:42 +01:00 committed by GitHub
parent cd4d2fa561
commit e564223708
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 43 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/icon/README.md
View file

@ -23,10 +23,9 @@ import '@lion/icon/lion-icon.js';
### Example ### Example
```js ```js
import 'lion-icon/lion-icon.js'; import './somewhere/my-iconset.js';
import bugSvg from './somewhere';
``` ```
```html ```html
<lion-icon .svg="${bugSvg}"></lion-icon> <lion-icon icon-id="somewhere:myIconset:foo"></lion-icon>
``` ```

54
packages/icon/stories/icon.stories.mdx
View file

@ -1,5 +1,8 @@
import { Story, Meta, html } from '@open-wc/demoing-storybook'; import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { bug24 } from './icons/iconset-bugs.js'; import './icons/iconset-bugs.js';
import './icons/iconset-misc.js';
import * as spaceSet from './icons/iconset-space.js';
import '../lion-icon.js'; import '../lion-icon.js';
import './icon-resolvers.js'; import './icon-resolvers.js';
@ -37,14 +40,39 @@ npm i --save @lion/icon
import '@lion/icon/lion-icon.js'; import '@lion/icon/lion-icon.js';
``` ```
### Displaying icons ### Icon sets
Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance. Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
See the system documentation to learn more about icon sets. See the system documentation to learn more about icon sets.
<Story name="Iconset"> <Story name="Icon sets">
{html` {html`
<lion-icon icon-id="lion:space:alienSpaceship"></lion-icon> ${Object.keys(spaceSet).map(
name => html`
<style>
.demo-icon__container {
display: inline-flex;
position: relative;
flex-grow: 1;
flex-direction: column;
align-items: center;
width: 80px;
height: 80px;
padding: 4px;
}
.demo-icon__name {
font-size: 10px;
}
</style>
<div class="demo-icon__container" title="lion:space:${name}">
<lion-icon
icon-id="lion:space:${name}"
aria-label="icon: ${name}"
></lion-icon>
<span class="demo-icon__name">${name}</span>
</div>
`
)}
`} `}
</Story> </Story>
@ -75,30 +103,30 @@ A `lion-icon` without an `aria-label` attribute will be automatically given an `
By default, a `lion-icon` will be `1em` × `1em` (the current line-height). By default, a `lion-icon` will be `1em` × `1em` (the current line-height).
`lion-icon` uses SVGs and may be styled with CSS, including using CSS properties such as `fill` and `stroke`: `lion-icon` uses SVGs and may be styled with CSS, including using CSS properties such as `fill`:
<Story name="Styling"> <Story name="Styling">
{html` {html`
<style> <style>
lion-icon.custom { .demo-icon {
width: 50px; width: 160px;
height: 50px; height: 160px;
fill: blue; fill: blue;
stroke: red;
} }
</style> </style>
<lion-icon icon-id="lion:bugs:bug02" aria-label="Pointing left"></lion-icon> <lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
`} `}
</Story> </Story>
```html ```html
<style> <style>
lion-icon { .demo-icon {
width: 160px;
height: 160px;
fill: blue; fill: blue;
stroke: lightsteelblue;
} }
</style> </style>
<lion-icon icon-id="lion:bugs:bug02" aria-label="Pointing left"></lion-icon> <lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
``` ```
See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS" target="_blank">SVG and CSS</a> on MDN web docs for more information. See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS" target="_blank">SVG and CSS</a> on MDN web docs for more information.