mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-30 08:09:15 +01:00
…
|
||
---|---|---|
.. | ||
__snapshots__ | ||
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="components-componentlibrary-icon--default-story" />
</Canvas>
## Props
The `Icon` accepts all props below as well as all [Box](/docs/components-ui-box--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](/story/components-componentlibrary-icon--default-story) story to find the icon you want to use.
<Canvas>
<Story id="components-componentlibrary-icon--name" />
</Canvas>
```jsx
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} />
<Icon name={ICON_NAMES.BANK} />
<Icon name={ICON_NAMES.CALCULATOR} />
<Icon name={ICON_NAMES.COIN} />
// etc...
```
### Size
Use the `size` prop and the `Size` object from `./ui/helpers/constants/design-system.js` to change the size of `Icon`. Defaults to `Size.SM`
Possible sizes include:
- `Size.XS` 12px
- `Size.SM` 16px
- `Size.MD` 20px
- `Size.LG` 24px
- `Size.XL` 32px
- `Size.inherit` inherits the font-size from parent element. This is useful for inline icons in text.
<Canvas>
<Story id="components-componentlibrary-icon--size-story" />
</Canvas>
```jsx
import { Size,TextVariant } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.XS} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.SM} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.MD} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.LG} />
<Icon name={ICON_NAMES.ADD_SQUARE} size={Size.XL} />
<Text as="p" variant={TextVariant.bodySm}>
<Icon size={Size.inherit} /> inherits the
font-size of the parent element.
</Text>
```
### Color
Use the `color` prop and the `Color` object from `./ui/helpers/constants/design-system.js` to change the color of `Icon`. Defaults to `Color.inherit` which will use the text color of the parent element. This is useful for inline icons.
<Canvas>
<Story id="components-componentlibrary-icon--color-story" />
</Canvas>
```jsx
import { IconColor } from '../../../helpers/constants/design-system';
import { Icon, ICON_NAMES } from '../../component-library';
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.inherit} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconAlternative} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.iconMuted} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.overlayInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.primaryInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.errorInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.successInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.warningInverse} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoDefault} />
<Icon name={ICON_NAMES.ADD_SQUARE} color={IconColor.infoInverse} />
```
### Layout & Spacing
The `Icon` component accepts all [Box](/docs/components-ui-box--default-story#props) component props including `marginTop`, `marginRight`, ` marginBottom`, `marginLeft` which you can use directly to adjust the space between icons and other components like `Text`
Some examples of `Icon` with `Text` using [Box](/docs/components-ui-box--default-story#props) component props
<Canvas>
<Story id="components-componentlibrary-icon--layout-and-spacing" />
</Canvas>
```jsx
import {
AlignItems,
DISPLAY,
IconColor,
FLEX_DIRECTION,
BorderColor,
BorderRadius,
} from '../../../helpers/constants/design-system';
import Box from '../../ui/box/box';
import { ICON_NAMES, Icon, Text, Label } from '../../component-library';
<Box display={DISPLAY.FLEX} flexDirection={FLEX_DIRECTION.COLUMN} gap={4}>
<Box display={DISPLAY.FLEX} alignItems={AlignItems.center}>
<Icon
name={ICON_NAMES.CHECK}
color={IconColor.successDefault}
marginRight={1}
/>
<Text>Always allow you to opt-out via Settings</Text>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
borderRadius={BorderRadius.pill}
backgroundColor={BackgroundColor.primaryMuted}
marginRight="auto"
>
<Text color={Color.primaryDefault}>
0x79fAaFe7B6D5DB5D8c63FE88DFF0AF1Fe53358db
</Text>
<Icon
name={ICON_NAMES.COPY}
color={IconColor.primaryDefault}
marginLeft={1}
/>
</Box>
<Box
as="button"
display={DISPLAY.FLEX}
alignItems={AlignItems.center}
padding={4}
borderColor={BorderColor.borderMuted}
backgroundColor={BackgroundColor.backgroundDefault}
>
<Icon name={ICON_NAMES.ADD} color={IconColor.iconDefault} marginRight={2} />
<Text>Create account</Text>
</Box>
<Label>
Custom spending cap{' '}
<Icon name={ICON_NAMES.INFO} size={ICON_SIZES.AUTO} marginLeft={1} />
</Label>
<div>
<Text>
<Icon
name={ICON_NAMES.WARNING}
size={ICON_SIZES.AUTO}
marginLeft={1}
color={IconColor.warningDefault}
/>{' '}
Warning
</Text>
</div>
</Box>;
```
### 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`
#### 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.