<mark>Please disregard generated HTML output in one of the tabs in the panel below. This one is a special snowflake for which you should use the below rails helper instead.</mark>

# Icons

This component is supposed to make it easy to add icons to the user interface.

## How?

### JSX

You can pass an object as `src` prop:

```
import Twitter from '@images/twitter.svg';
<Icon src={Twitter} />
```

Yes, we have an alias `@images` that should make it easier to access `/app/assets/images` folder while importing. 

### Rails

For Rails world, we have a helper which injects our icons similarly:

```
crayons_icon_tag(file_name, css_class: nil, native: false, **opts)
```

Keep in mind there's no need to provide the folder path - the helper handles that.

#### Parameters:

- **`name`** (String|Symbol) - The icon name from `/app/assets/images` folder. The `.svg` file extensions will be added automatically if missing.
- **`css_class`** (String) - additional CSS classes.
- **`native`** (Boolean) - when set to true, icon will not inherit its parent's color.
- **`opts`** - additional keyword arguments to be passed through to the [`inline_svg_tag` helper](https://github.com/jamesmartin/inline_svg).

## Colors

If asset (SVG file) was exported correctly (see Rules section below) and the component was used correctly, 
icon should inherit some Crayons styling that will, for example, automatically apply container's color to the icon itself. 
For example, icon will automatically inherit link color whenever it's placed inside a link element.

### Native colors

By adding `native` prop/parameter we tell icon to NOT inherit its parent color.
Instead it will keep whatever colors were defined in the SVG code. 
This is helpful for branded icons that come with their own specific color (logos like Twitter, Facebook, etc.) or for multicolor icons.

```
JSX: <Icon src={Twitter} native />
Rails: <%= crayons_icon_tag("twitter", native: true) %>
```

## Rules

Most of the icons you would ever need should already be inside `/app/assets/images` folder. If you can't find one, ask your designer.
If you want to export icon by yourself, go for it, just follow couple rules:

1. Icons must be 24x24px. **It should include appropriate padding.**
2. Icons must be in SVG format.
3. Icons must be placed in `/app/assets/images` folder.
4. We primarily use icons from [remixicon.com](http://remixicon.com/) (open source library) with bunch of exceptions and custom made ones.
5. Icons must be optimized in a tool like [SVGOMG](https://jakearchibald.github.io/svgomg/).
6. Icons should **not** have any `fill` attribute - this will let us style them pragmatically with Crayons magic (see "Colors" section above).
    - Only exception is for multicolor and/or branded icons.

## Design

<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="100%" height="450" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FgHpwugeu9jFGW4d9u3ReuR%2FCrayons%3Fnode-id%3D1%253A163" allowfullscreen></iframe>
