245e70d4a8
* init * buttons * buttons, ctas, icons * ctas fix * links vs ctas * alias * fixes * add tests for Buttons component * add tooltip to button story controls * add link and CTA tests * add prop types * docs * designs * docs * focus visible moved to global place * Updated some component snapshot tests. * Mocked react-inlinesvg module because of https://github.com/gilbarbara/react-inlinesvg/issues/145\#issuecomment-623453339 * tests * Copy updates Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * missed spots * Apply suggestions from code review Co-authored-by: Suzanne Aitchison <suzanne@forem.com> * danger accent colors * node * colors * adding code comment * better prop name: style -> variant * button new Co-authored-by: Suzanne Aitchison <suzanne@forem.com> Co-authored-by: Nick Taylor <nick@dev.to>
43 lines
2 KiB
Text
43 lines
2 KiB
Text
# Icons
|
|
|
|
This component is supposed to make it easy to add icons to your JSX code.
|
|
|
|
## How?
|
|
|
|
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.
|
|
|
|
## Colors
|
|
|
|
If asset (SVG file) was exported correctly (see Rules section below) and `<Icon />` 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 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.
|
|
|
|
## 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>
|