static-octicons v0.1.0
Static Octicons
A static version of GitHub Octicons.
Overview
This package allows to use Octicons in vanilla HTML, with support for changing their colors, using the following markup:
<svg class="octicon octicon-rocket" width="16" height="16">
<title>Rocket</title>
<use href="node_modules/static-octicons/svg/rocket-16.svg#icon"></use>
</svg>
Note: for this to work the SVG must be hosted on the same domain.
All other methods (<img>
, <embed>
, <object>
) don't allow for
manipulating the color or other attributes of the SVG. If you don't care
about this, you don't need this module and can can directly link to the
Octicons SVGs:
<img alt="Rocket" class="octicon octicon-rocket" src="node_modules/@primer/octicons/build/svg/rocket-16.svg">
The reason we can't do the same with the <use>
trick above is because
<use>
requires an ID
in the URL, and Octicons SVGs don't have an ID out of the box.
The only purpose of this package is to add id="icon"
to all Octicons
SVGs so they can be used that way.
Installation
npm install static-octicons
The icons are built automatically from @primer/octicons
during the installation phase. Nothing is included in the package
itself to keep it as lightweight as possible.
Usage
Icons are present in node_modules/static-octicons/svg
. Use them like
this:
<svg class="octicon octicon-rocket" width="16" height="16">
<title>Rocket</title>
<use href="node_modules/static-octicons/svg/rocket-16.svg#icon"></use>
</svg>
A note about class names
In the above example, the octicon-rocket
class is not really
necessary, I just include it to mimic what the Octicons library would
otherwise be doing. But it seems that only the octicon
class matters.
You can use the following command to see all the Primer CSS styles that depend on specific Octicons:
npx prettier --stdin-filepath primer.css < node_modules/@primer/css/dist/primer.css | grep '\.octicon-'
Note: here, we pretty print the minified CSS instead of looking
directly in the Sass code because that allows to get the full context of
the classes, as opposed to nested selectors. Also we pass the input CSS
to Prettier through stdin because it will otherwise ignore anything in
node_modules
even if explicitly passed as an argument.
This gives us the following list:
.status-indicator-success .octicon-check {
.status-indicator-success .octicon-x {
.status-indicator-failed .octicon-check {
.status-indicator-failed .octicon-x {
.dropdown-item[aria-checked="false"] .octicon-check {
.markdown-body h1 .octicon-link,
.markdown-body h2 .octicon-link,
.markdown-body h3 .octicon-link,
.markdown-body h4 .octicon-link,
.markdown-body h5 .octicon-link,
.markdown-body h6 .octicon-link {
.markdown-body h1:hover .anchor .octicon-link,
.markdown-body h2:hover .anchor .octicon-link,
.markdown-body h3:hover .anchor .octicon-link,
.markdown-body h4:hover .anchor .octicon-link,
.markdown-body h5:hover .anchor .octicon-link,
.markdown-body h6:hover .anchor .octicon-link {
If you don't use any of those components, feel free to omit the specific
icon class and just keep class="octicon"
.
3 years ago