octicons-react-ts
Make Octicons "Reacted" and "Typed".
You may also view all available icons in Octicons.
Install
npm install octicons-react-ts --save
or with yarn
yarn add octicons-react-ts
Usage
Typescript
The library is definitely typed, it also declared octicons
with octicons.d.ts
.
React
It's exposed as an React SFC.
The entire library will be available when importing octicons-react-ts
. Specifying the [icon you want to use][octicons], by supplying the name=""
to the component.
You may view all available icons in Octicons.
options
The name
is required, the optinal settings include: width
, height
, ratio
, viewport
, class
, aria-hidden
, aria-label
.
Remember that the component turns out to be a SVG. You may accquire more infomations at SVG: Scalable Vector Graphics | MDN. In short, they are almost pictures, css rules on pictures are probably compatible.
The optional settings all has default values. The width
, height
, viewport
are generated according to the data octicons
provided.
The default classes for these icons are octicon
and octicon-name
according to its name. You can add class to it with array of class names.
aria-hidden
is false and the default aria-label
is the icon's name, these can also be specified.
NOTE: About size. The svg size is determined in this order:
- If
width
specified, the width of svg is set that value.height
works the same way. - If
ratio
specified, the svg will be scaled to that value by default size. - The default size.
css
You may import scss like
And there is also the optional compiled dist/icon.css
.
Release
NOTE: This package release tag is a little bit diffrent, to keep the track of the reference to the source octicons
, the release tag is like bellow:
v<VERSION>.<SOURCEVERSION>.<PATCHES>
and the <SOURCEVERSION>
just concats octicons
main version and subversion.
So an example version tag of octicons-react
may look like v1.73.2
which stands: version 1 based on octicons-v7.3.x
(probably v7.3.0) with 2 patches.
Update
You may clone the project and update the icons to follow the octicons
at any time with the help of /src/scripts
.
You may just run
npm run catch && npm run build
And try it out to choose wether to link it to your project.
The symbol(name) and keywords are commented out in collect.js
and octicons.d.ts
, you may uncomment them and rebuild it.
Troubleshoot
data.json
not found ?
package If tsc or webpack complains, you may try to append this to your 'data.d.ts':
declare
How can I only import the icons I need ?
I suggest downloading the .svg
file from primer/octicons to you project in such situations.
And as far as I'm concerned, the @githubprime/octicons-react
is also a good choice.
May I use it with class and style sheet as a font ?
I'm considering it.
LICENSE
octicons
primer/octicons (c) GitHub, Inc.
When using the GitHub logos, be sure to follow the GitHub logo guidelines.
Code License: MIT
octicons-react
Copyright (c) 2018 Qotes
Code License: MIT