45 lines
1.9 KiB
Plaintext
Executable File
45 lines
1.9 KiB
Plaintext
Executable File
---
|
|
title: Styled System
|
|
status: Stable
|
|
source: 'https://github.com/primer/octicons/tree/master/lib/octicons_styled'
|
|
---
|
|
|
|
[](https://www.npmjs.org/package/@primer/styled-octicons)
|
|
|
|
The `@primer/styled-octicons` package wraps icon components from [`@primer/octicons-react`](/packages/react) with [system props](https://primer.style/components/system-props), making them easier to style in projects that use [styled system](https://styled-system.com/)—like [Primer Components](https://primer.style/components).
|
|
|
|
## Install
|
|
|
|
```shell
|
|
npm install @primer/styled-octicons
|
|
```
|
|
|
|
## Usage
|
|
|
|
`@primer/styled-octicons` exports each icons as a named export. This allows you to import only the icons you need:
|
|
|
|
```jsx
|
|
import {AlertIcon} from '@primer/styled-octicons'
|
|
|
|
export () => (
|
|
<AlertIcon color="red.6" mr={2} />
|
|
)
|
|
```
|
|
|
|
## System props
|
|
|
|
All icon components in `@primer/styled-octicons` get `color` and `space` system props as well as the `sx` prop. Read our [System Props](https://primer.style/components/system-props) documentation for a full list of available props.
|
|
|
|
|
|
## Props
|
|
|
|
In addition to system props, icon components in `@primer/styled-octicons` accept the same props as components in `@primer/octicons-react`:
|
|
|
|
| Name | Type | Default | Description |
|
|
| :- | :- | :-: | :- |
|
|
| aria-label | String | | Sets the [`aria-label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute) attribute of the `<svg>`. If no `aria-label` is defined, `aria-hidden` will be set to `true`. |
|
|
| className | String | | Sets the `class` attribute on the `<svg>` |
|
|
| size | Number \| `"small"` \| `"medium"` \| `"large"` | `16` | The height of the icon. Width will be scaled proportionally. |
|
|
| verticalAlign | `"middle"` \| `"text-bottom"` \| `"text-top"` \| `"top"` \| `"unset"` | `"text-bottom"` | The vertical alignment of the `<svg>` |
|
|
|