@primer/styled-octicons
TypeScript icon, indicating that this package has built-in type declarations

19.8.0 • Public • Published

@primer/styled-octicons

npm version

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>.

Package Sidebar

Install

npm i @primer/styled-octicons

Weekly Downloads

167

Version

19.8.0

License

MIT

Unpacked Size

138 MB

Total Files

334

Last publish

Collaborators

  • camertron
  • hectahertz
  • broccolini
  • jonrohan
  • joelhawksley
  • primer-css
  • colebemis
  • manuelpuyol
  • smockle
  • simurai
  • khiga8