@primer/octicons-react
v19.12.0
Published
A scalable set of icons handcrafted with <3 by GitHub.
Downloads
185,443
Readme
@primer/octicons-react
Install
npm install @primer/octicons-react
Usage
Icons
The @primer/octicons-react
module exports individual icons as named
exports. This
allows you to import only the icons that you need without blowing up your
bundle:
import React from 'react'
import {BeakerIcon, ZapIcon} from '@primer/octicons-react'
export default function Icon({boom}) {
return boom ? <ZapIcon /> : <BeakerIcon />
}
If you were to compile this example with a tool that supports tree-shaking (such as Webpack, Rollup, or Parcel) the resulting bundle would only include the "zap" and "beaker" icons.
Vertical alignment
By default the octicons have vertical-align: text-bottom;
applied as inline
styles. You can change the alignment via the verticalAlign
prop, which can be
either middle
, text-bottom
, text-top
, or top
.
import {RepoIcon} from '@primer/octicons-react'
export default () => (
<h1>
<RepoIcon verticalAlign="middle" /> github/github
</h1>
)
aria-label
You have the option of adding accessibility information to the icon with the
aria-label
attribute via the aria-label
prop.
// Example usage
import {PlusIcon} from '@primer/octicons-react'
export default () => (
<button>
<PlusIcon aria-label="Add new item" /> New
</button>
)
aria-labelledby
You have the option of adding accessibility information to the icon with the
aria-labelledby
attribute via the aria-labelledby
prop. Using aria-labelledby referencing the id values of the title element provides the accessible name.
// Example usage
import {PlusIcon} from '@primer/octicons-react'
export default () => (
<button>
<PlusIcon aria-labelledby="title" title="Add new item" /> New
</button>
)
title
You have the option of adding accessibility information to the icon with the
title
attribute via the title
prop.
id
You have the option of adding information to the icon with the
id
attribute via the id
prop.
// Example usage
import {PlusIcon} from '@primer/octicons-react'
export default () => (
<button>
<PlusIcon id="unique-plus-icon" /> New
</button>
)
tabIndex
You can add the tabindex
attribute to an SVG element via the tabIndex
prop if the SVG element is intended to be interactive.
tabIndex
prop also controls the focusable
attribute of the SVG element which is defined by SVG Tiny 1.2 and only implemented in
Internet Explorer and Microsoft Edge.
If there is no tabIndex
prop is present (default behavior), it will set the focusable
attribute to false
. This is helpful
for preventing the decorative SVG from being announced by some specialized assistive technology browsing modes which can get delayed
while trying to parse the SVG markup.
// Example usage
import {PlusIcon} from '@primer/octicons-react'
export default () => (
<PlusIcon aria-label="Interactive Plus Icon" tabIndex={0} /> New Item
)
Sizes
The size
prop takes small
, medium
, and large
values that can be used to
render octicons at standard sizes:
| Prop | Rendered Size |
| :-------------- | :------------------------------ |
| size='small'
| 16px height by computed
width |
| size='medium'
| 32px height by computed
width |
| size='large'
| 64px height by computed
width |
// Example usage
import {LogoGithubIcon} from '@primer/octicons-react'
export default () => (
<h1>
<a href="https://github.com">
<LogoGithubIcon size="large" aria-label="GitHub" />
</a>
</h1>
)
Fill
The fill
prop takes a string value that can be used to set the color of the icon.
By default, fill
is set to currentColor
.
// Example usage
import {LogoGithub} from '@primer/octicons-react'
export default () => (
<h1>
<a href="https://github.com">
<LogoGithubIcon fill="#f00" />
</a>
</h1>
)