react-icons
Version:
svg react icons of popular icon packs using ES6 imports
78 lines • 9.05 kB
HTML
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>React Icons</title>
<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.5/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
.logo-wrap {
width: 45px;
height: 45px;
display: inline-block;
background: #f2f2f2;
text-align: center;
border-radius: 25px;
border:1px solid #ddd;
margin-right: 10px;
}
.icon-pack {
text-align: center;
}
.icon-box {
text-align: center;
height: 100px;
}
.icon-name {
margin-top: 10px;
}
.readme-page {
padding: 20px;
}
</style>
</head>
<body>
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header" data-reactid=".10vo3f31ukg" data-react-checksum="1403374753"><header class="mdl-layout__header" style="background-color:#03A9F4;" data-reactid=".10vo3f31ukg.0"><div class="mdl-layout__header-row" data-reactid=".10vo3f31ukg.0.0"><div class="mdl-layout-spacer" data-reactid=".10vo3f31ukg.0.0.0"><h3 data-reactid=".10vo3f31ukg.0.0.0.0"><div class="logo-wrap" data-reactid=".10vo3f31ukg.0.0.0.0.0"><img src="https://rawgit.com/gorangajic/react-icons/master/react-icons.svg" width="40" height="40" data-reactid=".10vo3f31ukg.0.0.0.0.0.0"/></div><span data-reactid=".10vo3f31ukg.0.0.0.0.1">React Icons</span></h3></div></div></header><div class="mdl-layout__drawer" data-reactid=".10vo3f31ukg.1"><nav class="mdl-navigation" data-reactid=".10vo3f31ukg.1.0"><a href="./index.html" class="mdl-navigation__link" data-reactid=".10vo3f31ukg.1.0.0">Home</a><a href="./fa.html" class="mdl-navigation__link" data-reactid=".10vo3f31ukg.1.0.1:$0">Font Awesome</a><a href="./md.html" class="mdl-navigation__link" data-reactid=".10vo3f31ukg.1.0.1:$1">Material</a><a href="./ti.html" class="mdl-navigation__link" data-reactid=".10vo3f31ukg.1.0.1:$2">Typicons</a><a href="./go.html" class="mdl-navigation__link" data-reactid=".10vo3f31ukg.1.0.1:$3">Github Octicons</a></nav></div><main class="mdl-layout__content" data-reactid=".10vo3f31ukg.2"><div class="page-content" data-reactid=".10vo3f31ukg.2.0"><div class="readme-page" data-reactid=".10vo3f31ukg.2.0.0"><img src="https://rawgit.com/gorangajic/react-icons/master/react-icons.svg" width="60">
## [React Icons](http://gorangajic.github.io/react-icons/index.html)
<p>Include popular icons in you react project easly with <code>react-icons</code>. It uses ES6 imports so you can only include icons that your project is using.</p>
<h3 id="user-content-installation" class="deep-link"><a href="#installation">Installation</a></h3>
<pre><code>npm install react-icons --save
</code></pre>
<h3 id="user-content-usage" class="deep-link"><a href="#usage">Usage</a></h3>
<pre><code class="highlight javascript"><pre class="editor editor-colors"><div class="line"><span class="source js"><span class="keyword control js"><span>import</span></span><span> FaBeer from </span><span class="string quoted single js"><span class="punctuation string begin js"><span>'</span></span><span>react-icons/fa/FaBeer</span><span class="punctuation string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div><div class="line"><span class="source js"><span> </span></span></div><div class="line"><span class="source js"><span class="storage type js"><span>class</span></span><span> Question </span><span class="storage modifier js"><span>extends</span></span><span> React</span><span class="meta delimiter method period js"><span>.</span></span><span>Component </span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>    render</span><span class="meta brace round js"><span>(</span><span>)</span></span><span> </span><span class="meta brace curly js"><span>{</span></span></span></div><div class="line"><span class="source js"><span>        </span><span class="keyword control js"><span>return</span></span><span> </span><span class="keyword operator js"><span><</span></span><span>h3</span><span class="keyword operator js"><span>></span></span><span> Lets go </span><span class="keyword control js"><span>for</span></span><span> a </span><span class="keyword operator js"><span><</span></span><span>FaBeer /</span><span class="keyword operator js"><span>></span><span>?</span></span><span> </span><span class="keyword operator js"><span><</span></span><span>/h3</span><span class="keyword operator js"><span>></span></span></span></div><div class="line"><span class="source js"><span>    </span><span class="meta brace curly js"><span>}</span></span></span></div><div class="line"><span class="source js"><span class="meta brace curly js"><span>}</span></span></span></div></pre></code></pre>
<p>you can include icon directly from <code>react-icons</code> using <code>import FaBeer from 'react-icons'</code> but you should wait to webpack 2 <a href="https://twitter.com/dan_abramov/status/656970508005736448">implement</a> dead code elimination based on es6 imports</p>
<p>also it's possible to include whole icon pack from</p>
<pre><code class="highlight javascript"><pre class="editor editor-colors"><div class="line"><span class="source js"><span>    </span><span class="keyword control js"><span>import</span></span><span> </span><span class="keyword operator js"><span>*</span></span><span> as FontAwesome from </span><span class="string quoted single js"><span class="punctuation string begin js"><span>'</span></span><span>react-icons/fa</span><span class="punctuation string end js"><span>'</span></span></span></span></div></pre></code></pre>
<p>or import multiple icons from the same pack</p>
<pre><code class="highlight javascript"><pre class="editor editor-colors"><div class="line"><span class="source js"><span>    </span><span class="keyword control js"><span>import</span></span><span> </span><span class="meta brace curly js"><span>{</span></span><span>MdCancel</span><span class="meta delimiter object comma js"><span>,</span></span><span> MdChat</span><span class="meta delimiter object comma js"><span>,</span></span><span> MdCheck</span><span class="meta brace curly js"><span>}</span></span><span> from </span><span class="string quoted single js"><span class="punctuation string begin js"><span>'</span></span><span>react-icons/md</span><span class="punctuation string end js"><span>'</span></span></span><span class="punctuation terminator statement js"><span>;</span></span></span></div></pre></code></pre>
<p>every icon pack is in their own folder</p>
<ul>
<li>Material Design Icons => ./md</li>
<li>FontAwesome => ./fa</li>
<li>Typicons => ./ti</li>
</ul>
<p>to view all icons visit <a href="http://gorangajic.github.io/react-icons/">docs</a></p>
<h3 id="user-content-icons" class="deep-link"><a href="#icons">Icons</a></h3>
<p>Currenlty supported icons are</p>
<ul>
<li>Material Design Icons by Google https://www.google.com/design/icons/ (licence: <a href="https://github.com/google/material-design-icons/blob/master/LICENSE">CC-BY 4.0</a>)</li>
<li>Font Awesome by Dave Gandy - http://fontawesome.io (licence: <a href="http://scripts.sil.org/OFL">SIL OFL 1.1</a>)</li>
<li>Typicons by Stephen Hutchings - http://typicons.com (licence: <a href="http://creativecommons.org/licenses/by-sa/3.0/">CC BY-SA</a>)</li>
</ul>
<p>you can add more icons by creating pull request or create issue.</p>
<h3 id="user-content-contribution" class="deep-link"><a href="#contribution">Contribution</a></h3>
<p>just add svg icons in ./icons/:icons-name folder and create pull request agains <code>develop</code> after merge I will generate React components because this process is not fully automated yet.</p>
<h3 id="user-content-svg" class="deep-link"><a href="#svg">svg ?</a></h3>
<p>svg is <a href="http://caniuse.com/#search=svg">supported</a> by all major browser</p>
<h3 id="user-content-why-es6-import-and-not-fonts" class="deep-link"><a href="#why-es6-import-and-not-fonts">Why es6 import and not fonts?</a></h3>
<p>Because using <code>react-icons</code> you can only send icons to the users that are needed not one big font file, and also you can using this method easly figure out which icons are used in you project.</p>
<h3 id="user-content-licence" class="deep-link"><a href="#licence">Licence</a></h3>
<p>MIT</p>
<ul>
<li>icons are taken from the other projects so you should check each project licence</li>
</ul>
</div></div></main></div>
</body>
</html>