| 1 | ---
|
| 2 | title: Icon
|
| 3 | isExperimentalPackage: false
|
| 4 | ---
|
| 5 |
|
| 6 | Spark uses the “outline” variants of the wonderful open-source
|
| 7 | [Heroicons](https://heroicons.com/) library.
|
| 8 |
|
| 9 | ## Examples
|
| 10 |
|
| 11 | ### Size
|
| 12 |
|
| 13 | Define the icon size.
|
| 14 |
|
| 15 | ```jsx live
|
| 16 | <Inline gap="large" alignY="center">
|
| 17 | <LightBulbIcon size="xsmall" />
|
| 18 | <LightBulbIcon size="small" />
|
| 19 | <LightBulbIcon size="medium" />
|
| 20 | <LightBulbIcon size="large" />
|
| 21 | </Inline>
|
| 22 | ```
|
| 23 |
|
| 24 | ### Tone
|
| 25 |
|
| 26 | Define the icon tone.
|
| 27 |
|
| 28 | ```jsx live
|
| 29 | <Row gap="large" dividers>
|
| 30 | <Inline gap="large">
|
| 31 | <LightBulbIcon tone="neutral" />
|
| 32 | <LightBulbIcon tone="muted" />
|
| 33 | </Inline>
|
| 34 | <Inline gap="large">
|
| 35 | <LightBulbIcon tone="info" />
|
| 36 | <LightBulbIcon tone="positive" />
|
| 37 | <LightBulbIcon tone="caution" />
|
| 38 | <LightBulbIcon tone="critical" />
|
| 39 | <LightBulbIcon tone="accent" />
|
| 40 | </Inline>
|
| 41 | </Row>
|
| 42 | ```
|
| 43 |
|
| 44 | ### Contrast
|
| 45 |
|
| 46 | To ensure icons have sufficient contrast, when on a dark background the
|
| 47 | foreground tones “neutral” and “muted” will be inverted.
|
| 48 |
|
| 49 | ```jsx live
|
| 50 | <Inline gap="large">
|
| 51 | <Box background="neutral" padding="small" borderRadius="small">
|
| 52 | <LightBulbIcon tone="neutral" />
|
| 53 | </Box>
|
| 54 | <Box background="neutral" padding="small" borderRadius="small">
|
| 55 | <LightBulbIcon tone="muted" />
|
| 56 | </Box>
|
| 57 | </Inline>
|
| 58 | ```
|
| 59 |
|
| 60 | ## Props
|
| 61 |
|
| 62 | <PropsTable displayName="LightBulbIcon" />
|
| 63 |
|
| 64 | [data-attribute-map]:
|
| 65 | https://github.com/brighte-labs/spark-web/blob/e7f6f4285b4cfd876312cc89fbdd094039aa239a/packages/utils/src/internal/buildDataAttributes.ts#L1
|
| 66 | [size-type]:
|
| 67 | https://github.com/brighte-labs/spark-web/blob/11e73659ff4a01a48a8761821bff34c6ec28568b/packages/icon/src/createIcon.tsx#L9
|
| 68 | [foreground-tone]:
|
| 69 | https://github.com/brighte-labs/spark-web/blob/6c1909208460cb421e62f516106e774e4b0ddc35/packages/text/src/useForegroundTone.ts#L5
|