- GitHub: [BonnierNews/dn-design-system/../web/src/components/icon-sprite](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/icon-sprite)
- Storybook: [Icon](https://designsystem.dn.se/?path=/docs/foundations-icons--docs)
- Storybook (Latest): [Icon](https://designsystem-latest.dn.se/?path=/docs/foundations-icons--docs)

----

# Icons

There are three ways to use icons from DS:
* Use Icon from sprite: `IconUse({})`, this is the **recomended** way since this reduces the html output.
* Use Icon with wrapper: `IconWithWrapper({})`, the component itself uses the icons from the sprite but wraps it with a div and takes properties like size and color
* Use Icon from foundations: `Icon({})`, only use this if you need an inline icon, this will output the entire svg wherever it is used.


# Icon Sprite

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|icon | String | yes | add, arrow_back, arrow_forward etc | | For all available icons see: https://designsystem.dn.se/?path=/story/foundations-icons--all-icons |
|classNames | String | no | | | Ex. "my-special-class" |
|attributes | Object | no | | | Ex. { "data-test": "lorem ipsum" } |
|~forcePx~ | | | | | Not supported |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconUse %}

{{ IconUse({
  icon: 'arrow_back',
  classNames: 'my-special-class',
  attributes: { width: '16px' }
}) | safe }}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite";
```

ℹ️ The sprite has to be included **somewhere** on the rendered page

```html
{% from '@bonniernews/dn-design-system-web/components/icon-sprite/icon-sprite.njk' import IconSprite %}

{{ IconSprite() | safe }}
```