@planet/icons

@planet/icons

A planet icon library for use in React applications. Import and render SVG icons as react components.

To see all the icons rendered, Check out this hosted listing

Install

npm install @planet/icons

Usage

import React from 'react';
import CheckIcon from '@planet/icons/Check';

const App = () => (
  <div>
    <CheckIcon />
  </div>
);

Development

1. npm install

2. npm start - starts up the dev server (the console output will tell you what port it's running on)

3. Add your svg icon to src

4. Edit your icon to remove all unnecessary svg tags (see existing icons for examples)

5. Add your icon to the doc/main.js file (this gets automatically published)

6. Make sure the icon looks as expected in the browser

Design

Artwork for icons is located in the Explorer Sketch file here. You can find them on the page called Icons. But really, they are all symbols that you can find on the Symbols page. To add a new icon, copy an existing icon and follow the pattern: symbol named icons/icon-name, directory named icons/icon-name, ``🎨 Color` layer so we can use Sketch symbols for icon colors in prototypes, 'Shape' layer (this is the actual icon), and a 'bound' layer that is the 24px x 24px background for the SVG output. The short of it is that you have to add a new shape, make its' longest side 20px, center it in the bounding box and voilà.

When you export an icon as an SVG from Sketch, you have to remove some cruft. See the before and after below for details.

This is what we get from Sketch when exporting SVG:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24" height="24" viewBox="0 0 24 24">
  <defs>
    <path id="a" d="M17.9154924,17.3990613 C17.7589983,16.9921752 17.5164321,16.6635369 17.187793,16.4131456 C16.8591547,16.1627544 16.4600936,16.0219095 15.9906104,15.9906102 L15.0046948,15.9906102 L15.0046948,12.9859153 C15.0046948,12.7042256 14.9107977,12.4694836 14.723005,12.2816901 C14.5352108,12.0938967 14.3004696,11.9999996 14.0187791,11.9999996 L8.00938955,11.9999996 L8.00938955,9.98122042 L9.9812209,9.98122042 C10.2629106,9.98122042 10.4976526,9.8873241 10.685446,9.69953067 C10.8732395,9.51173724 10.9827858,9.27699525 11.0140843,8.9953047 L11.0140843,6.97652552 L12.9859157,6.97652552 C13.5492959,6.97652552 14.0266041,6.78873209 14.4178402,6.41314523 C14.8090763,6.03755837 15.0046948,5.56807519 15.0046948,5.0046949 L15.0046948,4.58215948 C16.5070422,5.20813758 17.7120498,6.17057901 18.6197184,7.46948378 C19.5273862,8.76838774 19.9968701,10.2785602 20.0281687,11.9999996 C19.9968701,13.0328639 19.8012517,14.0109546 19.4413141,14.9342725 C19.0813773,15.8575904 18.5727698,16.6791861 17.9154924,17.3990613 Z M11.0140843,19.9342723 C8.97965597,19.6525825 7.31298944,18.7840374 6.01408473,17.3286385 C4.71518001,15.8732396 4.03442915,14.0970266 3.97183135,11.9999996 C3.97183135,11.3740215 4.05007841,10.7793427 4.20657333,10.2159624 L8.99530522,15.0046945 L8.99530522,15.9906102 C8.99530522,16.5539905 9.19092367,17.0312987 9.58215977,17.4225356 C9.97339587,17.8137717 10.4507041,18.0093894 11.0140843,18.0093894 L11.0140843,19.9342723 Z M12,2 C9.15179934,2.06259781 6.7887327,3.03286347 4.91079846,4.91079778 C3.03286423,6.78873209 2.06259781,9.15179963 2,11.9999996 C2.06259781,14.8482004 3.03286423,17.2112679 4.91079846,19.0892022 C6.7887327,20.9671365 9.15179934,21.9374022 12,22 C14.8482007,21.9374022 17.2112673,20.9671365 19.0892015,19.0892022 C20.9671358,17.2112679 21.9374022,14.8482004 22,11.9999996 C21.9374022,9.15179963 20.9671358,6.78873209 19.0892015,4.91079778 C17.2112673,3.03286347 14.8482007,2.06259781 12,2 Z"/>
  </defs>
  <g fill="none" fill-rule="evenodd">
    <rect width="24" height="24"/>
    <mask id="b" fill="white">
      <use xlink:href="#a"/>
    </mask>
    <use fill="#000000" fill-rule="nonzero" xlink:href="#a"/>
    <g fill="#000000" mask="url(#b)">
      <rect width="24" height="24"/>
    </g>
  </g>
</svg>

This is what the SVG code should look like before you commit it to this project:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
  <path d="M17.9154924,17.3990613 C17.7589983,16.9921752 17.5164321,16.6635369 17.187793,16.4131456 C16.8591547,16.1627544 16.4600936,16.0219095 15.9906104,15.9906102 L15.0046948,15.9906102 L15.0046948,12.9859153 C15.0046948,12.7042256 14.9107977,12.4694836 14.723005,12.2816901 C14.5352108,12.0938967 14.3004696,11.9999996 14.0187791,11.9999996 L8.00938955,11.9999996 L8.00938955,9.98122042 L9.9812209,9.98122042 C10.2629106,9.98122042 10.4976526,9.8873241 10.685446,9.69953067 C10.8732395,9.51173724 10.9827858,9.27699525 11.0140843,8.9953047 L11.0140843,6.97652552 L12.9859157,6.97652552 C13.5492959,6.97652552 14.0266041,6.78873209 14.4178402,6.41314523 C14.8090763,6.03755837 15.0046948,5.56807519 15.0046948,5.0046949 L15.0046948,4.58215948 C16.5070422,5.20813758 17.7120498,6.17057901 18.6197184,7.46948378 C19.5273862,8.76838774 19.9968701,10.2785602 20.0281687,11.9999996 C19.9968701,13.0328639 19.8012517,14.0109546 19.4413141,14.9342725 C19.0813773,15.8575904 18.5727698,16.6791861 17.9154924,17.3990613 Z M11.0140843,19.9342723 C8.97965597,19.6525825 7.31298944,18.7840374 6.01408473,17.3286385 C4.71518001,15.8732396 4.03442915,14.0970266 3.97183135,11.9999996 C3.97183135,11.3740215 4.05007841,10.7793427 4.20657333,10.2159624 L8.99530522,15.0046945 L8.99530522,15.9906102 C8.99530522,16.5539905 9.19092367,17.0312987 9.58215977,17.4225356 C9.97339587,17.8137717 10.4507041,18.0093894 11.0140843,18.0093894 L11.0140843,19.9342723 Z M12,2 C9.15179934,2.06259781 6.7887327,3.03286347 4.91079846,4.91079778 C3.03286423,6.78873209 2.06259781,9.15179963 2,11.9999996 C2.06259781,14.8482004 3.03286423,17.2112679 4.91079846,19.0892022 C6.7887327,20.9671365 9.15179934,21.9374022 12,22 C14.8482007,21.9374022 17.2112673,20.9671365 19.0892015,19.0892022 C20.9671358,17.2112679 21.9374022,14.8482004 22,11.9999996 C21.9374022,9.15179963 20.9671358,6.78873209 19.0892015,4.91079778 C17.2112673,3.03286347 14.8482007,2.06259781 12,2 Z"/>
</svg>

Basically you need to strip the <g>...</g>, the <defs></defs> but not what's in them (i.e. the <path></path>), the id of the path, and the width and height in the <svg>.

Good to go!