Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@primer/octicons-react
Advanced tools
npm install @primer/octicons-react
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.
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
)
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>
)
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>
)
19.10.0
30be326a
Thanks @lukasoppermann! - Add multiple missing icons449d81f1
Thanks @joshblack! - Update types for @primer/octicons-react to explicitly include extensions for different moduleResolution settingsFAQs
A scalable set of icons handcrafted with <3 by GitHub.
The npm package @primer/octicons-react receives a total of 29,203 weekly downloads. As such, @primer/octicons-react popularity was classified as popular.
We found that @primer/octicons-react demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 14 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.