@primer/styled-octicons NPM | npm.io

19.9.0 • Published 1 month ago

Install

Weekly downloads

1,516

License

MIT

Repository

Last release

1 month ago

@primer/styled-octicons

The @primer/styled-octicons package wraps icon components from @primer/octicons-react with system props, making them easier to style in projects that use styled system—like Primer React.

Install

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:

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 the Primer React 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` 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>`.

GitHub icons svg octicons react primer

@styled-system/css @styled-system/prop-types @types/styled-system @types/styled-system__css styled-system

react-json-collapse @infinitebrahmanuniverse/nolb-_pri @everything-registry/sub-chunk-737 @bridgetool/gatsby-theme-dev react-collapse-json react-collapse-object @open-codes/opencodes @zalastax/nolb-_pri

1 month ago

8 months ago

8 months ago

9 months ago

9 months ago

1 year ago

1 year ago

1 year ago

11 months ago

11 months ago

11 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

13.0.0-rc.be685f8

3 years ago

3 years ago

13.0.0-rc.30ed134

3 years ago

13.0.0-rc.27074d6

3 years ago

3 years ago

13.0.0-rc.b72e3a8

3 years ago

3 years ago

3 years ago

3 years ago

13.0.0-rc.ae361a7

3 years ago

3 years ago

13.0.0-rc.f764296

3 years ago

3 years ago

13.0.0-rc.edfbf19

3 years ago

3 years ago

3 years ago

13.0.0-rc.9bba8e2

3 years ago

3 years ago

13.0.0-rc.29df4e0

3 years ago

13.0.0-rc.9074eeb

3 years ago

3 years ago

13.0.0-rc.a1df7be

3 years ago

13.0.0-rc.a4f31b5

3 years ago

13.0.0-rc.dcb4c1b

3 years ago

3 years ago

3 years ago

3 years ago

13.0.0-rc.551d17f

3 years ago

13.0.0-rc.75435f5

3 years ago

13.0.0-rc.37dd12c

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

12.1.0-rc.ce938b5

3 years ago

3 years ago

3 years ago

12.1.0-rc.8a7140a

3 years ago

3 years ago

12.1.0-rc.f1df71d

3 years ago

12.1.0-rc.ae719f9

3 years ago

12.1.0-rc.780636c

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

12.0.0-rc.ec99d7b

3 years ago

12.0.0-rc.476a415

3 years ago

12.0.0-rc.fea9564

3 years ago

3 years ago

3 years ago

12.0.0-rc.f8ed7c4

3 years ago

12.0.0-rc.8501809

3 years ago

12.0.0-rc.1be3275

3 years ago

12.0.0-rc.34d978c

3 years ago

12.0.0-rc.e0e204f

3 years ago

12.0.0-rc.b98ee37

3 years ago

3 years ago

12.0.0-rc.f6726ed

3 years ago

12.0.0-rc.2f1811e

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

11.3.0-rc.a027cab

3 years ago

11.3.0-rc.1056f4b

3 years ago

11.3.0-rc.5178ca5

3 years ago

11.3.0-rc.28f3cb7

3 years ago

3 years ago

3 years ago

3 years ago

11.3.0-rc.a323e73

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

11.2.0-rc.868e508

3 years ago

11.2.0-rc.4b25434

3 years ago

11.2.0-rc.c56ba01

3 years ago

11.2.0-rc.5c895f1

3 years ago

11.2.0-rc.c6f1f87

3 years ago

11.2.0-rc.f55dc98

3 years ago

11.2.0-rc.5b8103d

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

11.1.0-rc.0ae7b93

3 years ago

3 years ago

11.1.0-rc.246a065

3 years ago

11.1.0-rc.66c0549

3 years ago

11.1.0-rc.620fa19

3 years ago

11.1.0-rc.1643492

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

11.0.0-rc.0a15f23

4 years ago

11.0.0-rc.2e59bb4

4 years ago

4 years ago

4 years ago

4 years ago

11.0.0-rc.13bbf2c

4 years ago

4 years ago

11.0.0-rc.7418f68

4 years ago

11.0.0-rc.4a02a5e

4 years ago

11.0.0-rc.f423300

4 years ago

11.0.0-rc.150d490

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

10.1.0-rc.2f6fb16

4 years ago

10.1.0-rc.48628a9

4 years ago

10.1.0-rc.ee3d3d6

4 years ago

10.1.0-rc.9512409

4 years ago

10.1.0-rc.97c6b85

4 years ago

4 years ago

10.1.0-rc.961270a

4 years ago

10.1.0-rc.8d865ba

4 years ago

10.1.0-rc.73eea64

4 years ago

10.1.0-rc.8fbc115

4 years ago

10.1.0-rc.b8ebc4a

4 years ago

10.1.0-rc.ed280d4

4 years ago

10.1.0-rc.782a7e4

4 years ago

4 years ago

10.1.0-rc.b6dbe56

4 years ago

4 years ago

10.1.0-rc.f8dcead

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago