086a53ba93
* updates * updating doc * Fixed broken documentation in Storybook stories. * bring back a element * md --> mdx * c-* doc update Co-authored-by: Nick Taylor <nick@dev.to>
69 lines
3 KiB
Text
69 lines
3 KiB
Text
<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>
|