0.42.0 • Published 9 days ago

@spectrum-web-components/icon v0.42.0

Weekly downloads
814
License
Apache-2.0
Repository
github
Last release
9 days ago

Description

<sp-icon> renders an icon to the page. By default the name attribute will pair with separately registered icon sets to deliver the icons. When not present, <sp-icon> will subsequently check for its src attribute which could populate the icon via an image, and then fallback to any slotted content for an element based icon.

Usage

See it on NPM! How big is this package in your project?

yarn add @spectrum-web-components/icon

Import the side effectful registration of <sp-icon> via:

import '@spectrum-web-components/icon/sp-icon.js';

When looking to leverage the Icon base class as a type and/or for extension purposes, do so via:

import { Icon } from '@spectrum-web-components/icon';

Example

Names icons on this page are provided by the <sp-icons-medium> icon set. Learn how to create your own via sp-iconset.

<sp-icons-medium></sp-icons-medium>
<sp-icon name="ui:Arrow100"></sp-icon>

Variants

Icons are available in various sizes in Spectrum ranging from s to xxl. By default an sp-icon without a size attribute will appear as if it were size="m". We can specify the size via size attribute.

Size variants

<sp-icon size="s" name="ui:Arrow100"></sp-icon>
<sp-icon size="m" name="ui:Arrow100"></sp-icon>
<sp-icon size="l" name="ui:Arrow100"></sp-icon>
<sp-icon size="xl" name="ui:Arrow100"></sp-icon>
<sp-icon size="xxl" name="ui:Arrow100"></sp-icon>

Color icon

Icons apply their color as currentColor so change the color property of the element for customization.

<sp-icon name="ui:Arrow100" style="color: red;"></sp-icon>

Image icon

An image icon can be supplied via the src attribute. Remember that you cannot style the contents of an image via CSS, so use graphics that are appropriately prepared for including in your applications design requirements.

<sp-icon
    size="s"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="m"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="l"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="xl"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>
<sp-icon
    size="xxl"
    label="Previous"
    src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0yOTU3Ljk5NSAtNTUzMC4wMzIgNiAxMCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6bm9uZTtzdHJva2U6IzE0NzNlNjtzdHJva2UtbGluZWNhcDpyb3VuZDtzdHJva2UtbGluZWpvaW46cm91bmQ7c3Ryb2tlLW1pdGVybGltaXQ6MTA7c3Ryb2tlLXdpZHRoOjJweDt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0yNTEuMywzMzNsNC00LTQtNCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTI3MDEuNjk1IC01MTk2LjAzMikgcm90YXRlKDE4MCkiLz48L3N2Zz4="
></sp-icon>

Element icon

Icons can also be supplied as HTML elements to be applied via the default <slot>.

<sp-icon size="s">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>
<sp-icon>
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>
<sp-icon size="xxl">
    <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 22 22"
        role="img"
        fill="currentColor"
        height="18"
        width="18"
        aria-hidden="true"
    >
        <path
            d="M19.75,10.04h-15l5.97-5.97a.483.483,0,0,0,0-.7l-.35-.36a.513.513,0,0,0-.71,0L2.24,10.44a.513.513,0,0,0,0,.71l7.39,7.84a.513.513,0,0,0,.71,0l.35-.35a.513.513,0,0,0,0-.71L4.76,11.5H19.75a.25.25,0,0,0,.25-.25v-.96A.25.25,0,0,0,19.75,10.04Z"
        ></path>
    </svg>
</sp-icon>

Accessibility

aria-hidden is set to true by default for Icons. The label attribute suppresses this and adds the label text as the aria-label of the icon.

<sp-icon name="ui:Arrow100" label="Arrow pointing to the right"></sp-icon>
0.42.0

9 days ago

0.41.2

23 days ago

0.41.1

1 month ago

0.41.0

1 month ago

0.40.5

2 months ago

0.40.4

2 months ago

0.40.3

3 months ago

0.40.2

3 months ago

0.40.1

4 months ago

0.36.0

7 months ago

0.40.0

4 months ago

0.35.1-rc.15

8 months ago

0.37.0

7 months ago

0.34.1-rc.0

9 months ago

0.35.1-rc.25

8 months ago

0.35.1-rc.26

8 months ago

0.35.1-rc.24

8 months ago

0.38.0

7 months ago

0.35.1-rc.34

8 months ago

0.34.0

9 months ago

0.35.1-rc.43

8 months ago

0.35.1-rc.41

8 months ago

0.39.1

6 months ago

0.39.0

6 months ago

0.35.0

8 months ago

0.39.4

5 months ago

0.39.3

5 months ago

0.39.2

6 months ago

0.33.3-overlay.66

9 months ago

0.33.3-overlay.65

9 months ago

0.33.3-overlay.61

9 months ago

0.31.1-react.21

10 months ago

0.32.0

10 months ago

0.31.1-react.3

11 months ago

0.31.1-react.1

11 months ago

0.31.1-react.2

11 months ago

0.30.1-overlay.30

11 months ago

0.33.1-overlay.39

10 months ago

0.30.1-overlay.31

11 months ago

0.33.2

10 months ago

0.33.0

10 months ago

0.30.1-overlay.38

11 months ago

0.30.1-overlay.37

11 months ago

0.30.1-overlay.41

11 months ago

0.30.1-overlay.42

11 months ago

0.30.1-overlay.40

11 months ago

0.30.0

11 months ago

0.33.1-overlay.41

10 months ago

0.32.1-overlay.33

10 months ago

0.32.1-overlay.41

10 months ago

0.31.0

11 months ago

0.31.1-overlay.29

11 months ago

0.12.10

12 months ago

0.12.11

11 months ago

0.12.12-overlay.18

11 months ago

0.12.12-overlay.17

11 months ago

0.12.12-overlay.10

11 months ago

0.12.12-overlay.11

11 months ago

0.12.12-overlay.14

11 months ago

0.12.12-overlay.15

11 months ago

0.12.12-overlay.12

11 months ago

0.12.12-overlay.13

11 months ago

0.12.10-overlay.22

12 months ago

0.12.9

1 year ago

0.12.8-react.75

1 year ago

0.12.8-react.48

1 year ago

0.12.8-react.49

1 year ago

0.12.8-react.50

1 year ago

0.12.8

1 year ago

0.12.8-react.32

1 year ago

0.12.5-react.54

1 year ago

0.12.7

1 year ago

0.12.5

1 year ago

0.12.6

1 year ago

0.12.1

1 year ago

0.12.2

1 year ago

0.12.3

1 year ago

0.12.4

1 year ago

0.12.0-devmode.0

2 years ago

0.12.0

2 years ago

0.11.10

2 years ago

0.11.11

2 years ago

0.11.12

2 years ago

0.11.8

2 years ago

0.11.9

2 years ago

0.11.7

2 years ago

0.11.6

2 years ago

0.11.4

2 years ago

0.11.5

2 years ago

0.11.4-express.9

2 years ago

0.11.2

2 years ago

0.11.3

2 years ago

0.11.0

2 years ago

0.11.1

2 years ago

0.10.1

2 years ago

0.10.0

2 years ago

0.9.11

3 years ago

0.9.10

3 years ago

0.9.10-beta.32

3 years ago

0.9.10-alpha.30

3 years ago

0.9.10-alpha.1

3 years ago

0.9.9

3 years ago

0.9.8

3 years ago

0.9.9-alpha.1

3 years ago

0.9.8-alpha.59

3 years ago

0.9.8-alpha.1

3 years ago

0.9.7

3 years ago

0.9.7-alpha.74

3 years ago

0.9.7-alpha.73

3 years ago

0.9.7-alpha.72

3 years ago

0.9.7-alpha.61

3 years ago

0.9.7-alpha.27

3 years ago

0.9.7-alpha.0

3 years ago

0.9.6

3 years ago

0.9.5-alpha.26

3 years ago

0.9.5

3 years ago

0.9.5-alpha.23

3 years ago

0.9.5-alpha.21

3 years ago

0.9.5-beta.17

3 years ago

0.9.5-beta.16

3 years ago

0.9.5-beta.11

3 years ago

0.9.5-beta.10

3 years ago

0.9.5-beta.13

3 years ago

0.9.5-beta.12

3 years ago

0.9.5-beta.15

3 years ago

0.9.5-beta.14

3 years ago

0.9.5-alpha.12

3 years ago

0.9.5-alpha.11

3 years ago

0.9.5-alpha.10

3 years ago

0.9.5-alpha.17

3 years ago

0.9.5-alpha.9

3 years ago

0.9.4

3 years ago

0.9.3

3 years ago

0.9.2

3 years ago

0.9.1

3 years ago

0.9.0

3 years ago

0.8.3-alpha.33

3 years ago

0.8.3

3 years ago

0.8.2

3 years ago

0.8.1

3 years ago

0.8.0

3 years ago

0.7.0-alpha.40

3 years ago

0.6.4-alpha.178

3 years ago

0.7.0

3 years ago

0.6.4-alpha.169

3 years ago

0.6.4-alpha.84

3 years ago

0.6.4-alpha.85

3 years ago

0.6.4-alpha.60

3 years ago

0.6.3-alpha.0

3 years ago

0.6.3

3 years ago

0.6.2

3 years ago

0.6.2-beta.17

3 years ago

0.6.2-alpha.17

3 years ago

0.6.1

4 years ago

0.6.0

4 years ago

0.5.2-alpha.77

4 years ago

0.5.2

4 years ago

0.5.2-alpha.34

4 years ago

0.5.1

4 years ago

0.5.0

4 years ago

0.4.9-alpha.38

4 years ago

0.4.8

4 years ago

0.4.7

4 years ago

0.4.6

4 years ago

0.4.6-alpha.11

4 years ago

0.4.5

4 years ago

0.4.4

4 years ago

0.4.3

4 years ago

0.4.2

4 years ago

0.4.1

4 years ago

0.4.0

4 years ago

0.3.0

4 years ago

0.2.0

4 years ago

0.1.3

4 years ago

0.1.2

5 years ago

0.1.1

5 years ago

0.1.0

5 years ago

0.0.1

5 years ago