@primer/styled-octicons NPM | npm.io

19.12.0 • Published 9 months ago

Install

Weekly downloads

1,516

License

MIT

Repository

Last release

9 months 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 @open-codes/opencodes react-collapse-json react-collapse-object @zalastax/nolb-_pri

9 months ago

1 year 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

2 years ago

2 years ago

2 years ago

3 years ago

3 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

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

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

4 years ago

4 years ago

4 years ago

4 years ago

13.0.0-rc.be685f8

4 years ago

4 years ago

13.0.0-rc.30ed134

4 years ago

13.0.0-rc.27074d6

4 years ago

4 years ago

13.0.0-rc.b72e3a8

4 years ago

4 years ago

4 years ago

4 years ago

13.0.0-rc.ae361a7

4 years ago

4 years ago

13.0.0-rc.f764296

4 years ago

4 years ago

13.0.0-rc.edfbf19

4 years ago

4 years ago

4 years ago

13.0.0-rc.9bba8e2

4 years ago

4 years ago

13.0.0-rc.29df4e0

4 years ago

13.0.0-rc.9074eeb

4 years ago

4 years ago

13.0.0-rc.a1df7be

4 years ago

13.0.0-rc.a4f31b5

4 years ago

13.0.0-rc.dcb4c1b

4 years ago

4 years ago

4 years ago

4 years ago

13.0.0-rc.551d17f

4 years ago

13.0.0-rc.75435f5

4 years ago

13.0.0-rc.37dd12c

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

12.1.0-rc.ce938b5

4 years ago

4 years ago

4 years ago

12.1.0-rc.8a7140a

4 years ago

4 years ago

12.1.0-rc.f1df71d

4 years ago

12.1.0-rc.ae719f9

4 years ago

12.1.0-rc.780636c

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

12.0.0-rc.ec99d7b

4 years ago

12.0.0-rc.476a415

4 years ago

12.0.0-rc.fea9564

4 years ago

4 years ago

4 years ago

12.0.0-rc.f8ed7c4

4 years ago

12.0.0-rc.8501809

4 years ago

12.0.0-rc.1be3275

4 years ago

12.0.0-rc.34d978c

4 years ago

12.0.0-rc.e0e204f

4 years ago

12.0.0-rc.b98ee37

4 years ago

4 years ago

12.0.0-rc.f6726ed

4 years ago

12.0.0-rc.2f1811e

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.3.0-rc.a027cab

4 years ago

11.3.0-rc.1056f4b

4 years ago

11.3.0-rc.5178ca5

4 years ago

11.3.0-rc.28f3cb7

4 years ago

4 years ago

4 years ago

4 years ago

11.3.0-rc.a323e73

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

11.2.0-rc.868e508

5 years ago

11.2.0-rc.4b25434

5 years ago

11.2.0-rc.c56ba01

5 years ago

11.2.0-rc.5c895f1

5 years ago

11.2.0-rc.c6f1f87

5 years ago

11.2.0-rc.f55dc98

5 years ago

11.2.0-rc.5b8103d

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

11.1.0-rc.0ae7b93

5 years ago

5 years ago

11.1.0-rc.246a065

5 years ago

11.1.0-rc.66c0549

5 years ago

11.1.0-rc.620fa19

5 years ago

11.1.0-rc.1643492

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

11.0.0-rc.0a15f23

5 years ago

11.0.0-rc.2e59bb4

5 years ago

5 years ago

5 years ago

5 years ago

11.0.0-rc.13bbf2c

5 years ago

5 years ago

11.0.0-rc.7418f68

5 years ago

11.0.0-rc.4a02a5e

5 years ago

11.0.0-rc.f423300

5 years ago

11.0.0-rc.150d490

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

10.1.0-rc.2f6fb16

5 years ago

10.1.0-rc.48628a9

5 years ago

10.1.0-rc.ee3d3d6

5 years ago

10.1.0-rc.9512409

5 years ago

10.1.0-rc.97c6b85

5 years ago

5 years ago

10.1.0-rc.961270a

5 years ago

10.1.0-rc.8d865ba

5 years ago

10.1.0-rc.73eea64

5 years ago

10.1.0-rc.8fbc115

5 years ago

10.1.0-rc.b8ebc4a

5 years ago

10.1.0-rc.ed280d4

5 years ago

10.1.0-rc.782a7e4

5 years ago

5 years ago

10.1.0-rc.b6dbe56

5 years ago

5 years ago

10.1.0-rc.f8dcead

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago