@primer/g-octicon

<g-octicon>

This is a custom element that renders SVG Octicons on your page at runtime.

Installation

If you're using npm, install it with:

npm i --save @primer/g-octicon

Otherwise, you can grab the browser bundle from:

https://unpkg.com/@primer/g-octicon

Usage

Add one or more <g-octicon> elements to your HTML:

<g-octicon icon="logo-github" aria-label="GitHub"></g-octicon>

You can create <g-octicon> elements in JavaScript, too:

const alert = document.createElement('g-octicon')
alert.setAttribute('icon', 'alert')

// setting innerHTML will work, too
document.getElementById('icon').innerHTML = `
  <g-octicon icon="alert"></g-octicon>
`

Attributes

The following attributes are observed, and will cause the icon to re-render when changed:

• icon is the name of the Octicon, e.g. alert or beaker
• width sets the width of the icon in pixels and scales the height proportionally
• height sets the height of the icon in pixels and sets the width proportionally

You need only provide width or height. Providing both will produce unwanted vertical or horizontal whitespace around the icon.

License

MIT © GitHub