Update iconography documentation

This commit is contained in:
wenincode 2022-10-26 08:57:31 -06:00
parent 6a4cd42a2b
commit cbc150f7bf
1 changed files with 50 additions and 56 deletions

View File

@ -1,5 +1,12 @@
# Iconography
_We recently started adopting the [@hashicorp/ember-flight-icons](https://flight-hashicorp.vercel.app/) package, in particular the
usage of the `<FlightIcon>` component to render icons. This enables us to use all the
icons listed [on the flight icons page](https://flight-hashicorp.vercel.app/). If an icon is not present in the flight-icons package,
you may resort to the techniques listed below._
---
All our iconography uses native CSS properties for adding iconography from The
Outside. You can also add icons using the same properties within `style=""`
attributes, but you should think twice before adding decorative content into
@ -29,14 +36,14 @@ selectors.
```css
.selector::before {
--icon-name: icon-aws-color;
--icon-name: icon-alert-circle;
content: '';
}
```
```css
.selector::after {
--icon-name: icon-aws;
--icon-name: icon-alert-circle;
--icon-color: rgb(var(---white));
content: '';
}
@ -48,7 +55,7 @@ icons in HTML using these CSS properties.
```hbs preview-template
<h2
style={{style-map
(array '--icon-name-start' 'icon-consul')
(array '--icon-name-start' 'icon-alert-circle')
(array '--icon-color-start' 'rgb(var(--tone-strawberry-500))')
(array '--icon-name-end' 'icon-vault')
(array '--icon-color-end' 'var(--color-vault-500)')
@ -64,9 +71,7 @@ following. Under different circumstances this would give us an option that works
```hbs
<span
class={{class-map
'visually-hidden'
}}
class={{class-map 'visually-hidden'}}
style={{style-map
(array '--icon-name-start' @name)
(array '--icon-color' @color)
@ -75,11 +80,9 @@ following. Under different circumstances this would give us an option that works
...attributes
>{{yield}}</span>
<Icon @name="icon-name" @color="#FF0000" @size="icon-300" />
<Icon @name='icon-name' @color='#FF0000' @size='icon-300' />
```
## Deprecated
Please prefer our Constructable `%placeholder` styles over singular CSS
@ -111,65 +114,56 @@ use `-mask`, use `-icon` instead:
```css
.selector::before {
@extend %with-logo-consul-color-icon, %as-pseudo;
@extend %with-alert-circle-icon, %as-pseudo;
}
```
```hbs preview-template
<figure>
<select
onchange={{action (mut this.type) value="target.value"}}
>
<select onchange={{action (mut this.type) value='target.value'}}>
<option>colored</option>
<option>monochrome</option>
</select>
<select
onchange={{action (mut this.theme) value="target.value"}}
>
<select onchange={{action (mut this.theme) value='target.value'}}>
<option>light</option>
<option>dark</option>
</select>
<input
oninput={{action (mut this.size) value="target.value"}}
type="range" min="100" max="900" step="100"
oninput={{action (mut this.size) value='target.value'}}
type='range'
min='100'
max='900'
step='100'
/>
{{this.size}}
</figure>
<ul
{{css-props (set this 'icons')
prefix='icon-'
}}
class={{class-map
(concat 'theme-' (or this.theme 'light'))
}}
{{css-props (set this 'icons') prefix='icon-'}}
class={{class-map (concat 'theme-' (or this.theme 'light'))}}
style={{style-map
(array '--icon-color' (if (eq this.type 'monochrome') 'rgb(var(--black))'))
(array '--icon-size' (concat 'icon-' (or this.size '500')))
(array '--icon-resolution' (if (gt this.size 500) '.5' '1'))
}}
>
{{#each-in this.icons as |prop value|}}
{{#if (and
{{#each-in this.icons as |prop value|}}
{{#if
(and
(not (includes prop (array '--icon-name' '--icon-color' '--icon-size' '--icon-resolution')))
(not (string-includes prop '-24'))
)
}}
{{#let
(string-replace (string-replace prop '-16' '') '--' '')
as |name|}}
}}
{{#let (string-replace (string-replace prop '-16' '') '--' '') as |name|}}
<li>
<figure
{{with-copyable (concat '--icon-name: ' name ';content: "";')}}
style={{style-map
(array '--icon-name-start' name)
}}
style={{style-map (array '--icon-name-start' name)}}
>
<figcaption>{{name}}</figcaption>
</figure>
</li>
{{/let}}
{{/if}}
{{/each-in}}
{{/let}}
{{/if}}
{{/each-in}}
</ul>
```