mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
23b412c13f
* Adding global index.js file * Removing style prop from button base * Fixing comment on generate-icon-names.js file * Re-ordering sass imports to atomic structure * Updating component paths code examples of MDX docs |
||
---|---|---|
.. | ||
icon.constants.js | ||
icon.js | ||
icon.scss | ||
icon.stories.js | ||
icon.test.js | ||
index.js | ||
README.mdx |
import { Story, Canvas, ArgsTable } from '@storybook/addon-docs'; import { Icon } from './icon'; # Icon The `Icon` component in conjunction with `ICON_NAMES` can be used for all icons in the extension <Canvas> <Story id="ui-components-component-library-icon-icon-stories-js--default-story" /> </Canvas> ## Props The `Icon` accepts all props below as well as all [Box](/docs/ui-components-ui-box-box-stories-js--default-story#props) component props <ArgsTable of={Icon} /> ### Name Use the `name` prop and the `ICON_NAMES` object to change the icon. Use the [IconSearch](/ui-components-component-library-icon-icon-stories-js--name) story to find the icon you want to use. ```jsx import { Icon, ICON_NAMES } from '../../ui/components/component-library'; <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} /> <Icon name={ICON_NAMES.BANK_FILLED} /> <Icon name={ICON_NAMES.CALCULATOR_FILLED} /> <Icon name={ICON_NAMES.COIN_FILLED} /> ``` <Canvas> <Story id="ui-components-component-library-icon-icon-stories-js--name" /> </Canvas> ### Size Use the `size` prop and the `SIZES` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `SIZES.SM` Possible sizes include: - `SIZES.XXS` 10px - `SIZES.XS` 12px - `SIZES.SM` 16px - `SIZES.MD` 20px - `SIZES.LG` 24px - `SIZES.XL` 32px - `SIZES.AUTO` inherits the font-size from parent element. This is useful for inline icons in text. <Canvas> <Story id="ui-components-component-library-icon-icon-stories-js--size" /> </Canvas> ```jsx import { SIZES } from '../../../helpers/constants/design-system'; import { Icon, ICON_NAMES } from '../../ui/components/component-library'; <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XXS} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XS} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.SM} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.MD} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.LG} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} size={SIZES.XL} /> <Text as="p" variant={TEXT.BODY_SM}> <Icon size={SIZES.AUTO} /> Auto also exists and inherits the font-size of the parent element. </Text> ``` ### Color Use the `color` prop and the `COLORS` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `COLORS.INHERIT` which will use the text color of the parent element. This is useful for inline icons. <Canvas> <Story id="ui-components-component-library-icon-icon-stories-js--color" /> </Canvas> ```jsx import { COLORS } from '../../../helpers/constants/design-system'; import { Icon, ICON_NAMES } from '../../ui/components/component-library'; <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INHERIT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_ALTERNATIVE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ICON_MUTED} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.OVERLAY_INVERSE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.PRIMARY_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.PRIMARY_INVERSE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ERROR_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.ERROR_INVERSE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.SUCCESS_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.SUCCESS_INVERSE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.WARNING_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.WARNING_INVERSE} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INFO_DEFAULT} /> <Icon name={ICON_NAMES.ADD_SQUARE_FILLED} color={COLORS.INFO_INVERSE} /> ``` ### Adding a new icon To add a new icon the only thing you need to do is add the icon svg file to `app/images/icons`. To ensure that the icon is added correctly follow these steps: #### Step 1. Optimize the svg using [Fontastic](https://fontastic.me/). This will remove any unnecessary code from the svg. Your svg should only contain a single path. Example of a correctly optimized svg: ``` <svg xmlns="http://www.w3.org/2000/svg" id="icon-add-square-filled" viewBox="0 0 512 512"> <path d="m337 51l-171 0c-75 0-119 45-119 119l0 172c0 74 44 119 119 119l171 0c75 0 119-45 119-119l0-172c1-74-44-119-119-119z m-3 220l-67 0 0 67c0 8-7 15-15 15-9 0-16-7-16-15l0-67-66 0c-9 0-16-7-16-15 0-8 7-15 16-15l66 0 0-67c0-8 7-15 16-15 8 0 15 7 15 15l0 67 67 0c8 0 15 7 15 15 0 8-7 15-15 15z"/> </svg> ``` If your svg **does not** contain a single path, you will need to get a designer to join all paths and outline strokes into a single path. #### Step 2. Add your optimized svg file to to `app/images/icons` and ensure the icon name starts with `icon-` e.g. `icon-add-square-filled.svg` #### Step 3. Run `yarn start` to generate the `ICON_NAMES` with your added icon. If you have any questions please reach out to the design system team in the [#metamask-design-system](https://consensys.slack.com/archives/C0354T27M5M) channel on slack.