@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()=>(
<AlertIconcolor="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.