UNPKG

@momentum-ui/react-collaboration

Version:

Cisco Momentum UI Framework for React Collaboration Applications

momentum.design

momentum-design/momentum-react-v2

39 lines (28 loc) • 3.49 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import Icon from './Icon'; `<Icon />` is a generic icon component that acts as an dynamic icon loader. # `weight` vs `weightless` The way the `<Icon/>` component works, is, it takes `name` and an optional `weight` props. The `name` props identifies the icon `name` (can usually be found in Figma specs easily by looking at the name of the Figma component). The `weight` prop determines the style of the icon, and there are 4 possible options: (thin, regular, bold, filled). Most icons from the icons library will have a weight variant (remark: some might only have a subset of those), but some icons will not have a weight variant (these are special icons): examples are brand icons, and icons like `webex-assistant-active`. If you're trying to use an icon which has a variant, use the `weight` prop. (Note that it defaults to `regular` if not provided.) If you're trying to use an icon that doesn't support weights, you'll have to use the `weightless` prop so that the `<Icon/>` component can find the correct .svg file. ### How SVG name resolving works The internal logic to find icons is as follows: `resolvedSVGName` = `name` + `weight` if `weightless=false` otherwise `name`. #### Examples: | Component | resolvedSVGName | explanation | rendered | | ---------------------------------------------------------- | -------------------------------------------- | -------------------------------------------------------------------- | -------------------------------------------------------- | | `<Icon name="cancel"/>` | `cancel-regular.svg` | Because weight prop defaults to regular. | <Icon name="cancel"/> | | `<Icon name="cancel" weight="thin"/>` | `cancel-regular-thin.svg` | Weight `thin` for `cancel` icon doens't exist. | <Icon name="cancel" weight="thin"/> | | `<Icon name="cancel" weight="regular"/>` | `cancel-regular.svg` | | <Icon name="cancel" weight="regular"/> | | `<Icon name="cancel" weight="bold"/>` | `cancel-bold.svg` | | <Icon name="cancel" weight="bold"/> | | `<Icon name="cancel" weight="filled"/>` | `cancel-filled.svg` | Weight `filled` for `cancel` icon doens't exist. | <Icon name="cancel" weight="filled"/> | | `<Icon name="webex-assistant-active-colored" weightless/>` | `webex-assistant-active-colored.svg` | | <Icon name="webex-assistant-active-colored" weightless/> | | `<Icon name="webex-assistant-active-colored"/>` | `webex-assistant-active-colored-regular.svg` | ⚠️ This will break! Make sure you check if the icon supports weights. | <Icon name="webex-assistant-active-colored" /> | # Figma Icons Library [Figma Link](https://www.figma.com/file/SXK8Gb5tMlN9xiG2cC4OBu/Assets---Icon-Library?node-id=0%3A1)