react-pretty-icons v0.0.13

SVG Icons

You don't need to use any webpack loader (I swear) with this package, is a lightweight library which uses just javascript. Is just install and import it.

How it works?

We are using babel-plugin-inline-react-svg to convert SVG to javascript, so we don't need SVG loader any more.

But, is not that a bad way to do that?

No, it's a good way! Because we are including each icon "on demand", ex. When you import a icon, we are loading just this specifically icon.

The Ideia

react-pretty-icons.js
render() {
    const { name } = this.props;
    const icon = require(name + '.svg');
    ....
}

your-code.js
render() {
  return (
      <Icon name="icon_name" />
  );
}

Install

npm install react-pretty-icons --save

Development

brew install -v librsvg

git clone git@github.com:agutoli/react-pretty-icons.git

npm install

cp -R ./hooks/* ./.git/hooks/; chmod -R +x ./.git/hooks

Usage

import Icon from 'react-pretty-icons';
...
class MyReactComp extends React.Component {
   render() {
     return (
       <div>
         <Icon
          name="facebook_clr"
          className="my-prefix__icons" />
       </div>   
     );
   }
}

How can I add a new icon?

Guy, It's ridiculously simple, just move your icon to ./src/new_icons/your_new_icon.svg and git add . and git commit -m "you message".

After your commit it will run each step automatically

* Convert svg icon to javascript (auto)
* Update this README with the new icons (auto)
* Normalize the icons for the same size 32x32 (auto)
* After commit, the Pipelines will upload theses new icons to amazon `s3`

CREDITS

Free Basic UI Elements

SimpleIcon

http://www.simpleicon.com

• Link: https://www.flaticon.com/packs/simpleicon-social-media
• License: CC 3.0 BY

Lucy G

https://bylucyg.com/

• Link: https://www.flaticon.com/authors/lucy-g
• License: CC 3.0 BY

Bogdan Rosu

http://www.bogdanrosu.com

• Link: https://www.flaticon.com/packs/glypho
• License: CC 3.0 BY

Icon Pack

-	A	B	C	D	E	F
1
	access-point-network	access-point	account-alert	account-arrow-left-outline	account-arrow-left	account-arrow-right-outline	account-arrow-right	account-box-multiple
2
	account-box-outline	account-box	account-card-details	account-check	account-child-circle	account-child	account-circle	account-clock-outline
3
	account-clock	account-convert	account-details	account-edit	account-group	account-heart	account-key	account-location
4
	account-minus-outline	account-minus	account-multiple-check	account-multiple-minus	account-multiple-outline	account-multiple-plus-outline	account-multiple-plus	account-multiple
5
	account-network	account-off	account-outline	account-plus-outline	account-plus	account-remove-outline	account-remove	account-search-outline
6
	account-search	account-settings-variant	account-settings	account-supervisor-circle	account-supervisor	account-switch	account	accusoft
7
	add	adjust	adobe	air-conditioner	airballoon	airplane-landing	airplane-off	airplane-takeoff
8
	airplane	airplay	airport	alarm-bell	alarm-check	alarm-light	alarm-multiple	alarm-off
9
	alarm-plus	alarm-snooze	alarm	album	alert-box	alert-circle-outline	alert-circle	alert-decagram
10
	alert-octagon	alert-octagram	alert-outline	alert	alien	all-inclusive	allo	alpha-a-box
11
	alpha-a	alpha-b-box	alpha-b	alpha-c-box	alpha-c	alpha-d-box	alpha-d	alpha-e-box
12
	alpha-e	alpha-f-box	alpha-f	alpha-g-box	alpha-g	alpha-h-box	alpha-h	alpha-i-box
13
	alpha-i	alpha-j-box	alpha-j	alpha-k-box	alpha-k	alpha-l-box	alpha-l	alpha-m-box
14
	alpha-m	alpha-n-box	alpha-n	alpha-o-box	alpha-o	alpha-p-box	alpha-p	alpha-q-box
15
	alpha-q	alpha-r-box	alpha-r	alpha-s-box	alpha-s	alpha-t-box	alpha-t	alpha-u-box
16
	alpha-u	alpha-v-box	alpha-v	alpha-w-box	alpha-w	alpha-x-box	alpha-x	alpha-y-box
17
	alpha-y	alpha-z-box	alpha-z	alpha	alphabetical	altimeter	amazon-alexa	amazon-clouddrive
18
	amazon	ambulance	ampersand	amplifier	anchor	android-auto	android-debug-bridge	android-head
19
	android-studio	android	angle-acute	angle-obtuse	angle-right	angular	angularjs	animation-outline
20
	animation-play-outline	animation-play	animation	anvil	app-store-apple-symbol	apple-finder	apple-ios	apple-keyboard-caps
21
	apple-keyboard-command	apple-keyboard-control	apple-keyboard-option	apple-keyboard-shift	apple-logotype	apple-mobileme	apple-safari	apple
22
	application	appnet	approval	apps	arch	archive	armchair-silhouette	arrange-bring-forward
23
	arrange-bring-to-front	arrange-send-backward	arrange-send-to-back	arrow-all	arrow-bottom-left-bold-outline	arrow-bottom-left-thick	arrow-bottom-left	arrow-bottom-right-bold-outline
24
	arrow-bottom-right-thick	arrow-bottom-right	arrow-collapse-all	arrow-collapse-down	arrow-collapse-horizontal	arrow-collapse-left	arrow-collapse-right	arrow-collapse-up
25
	arrow-collapse-vertical	arrow-collapse	arrow-decision-auto-outline	arrow-decision-auto	arrow-decision-outline	arrow-decision	arrow-down-bold-box-outline	arrow-down-bold-box
26
	arrow-down-bold-circle-outline	arrow-down-bold-circle	arrow-down-bold-hexagon-outline	arrow-down-bold-outline	arrow-down-bold	arrow-down-box	arrow-down-drop-circle-outline	arrow-down-drop-circle
27
	arrow-down-drop	arrow-down-thick	arrow-down	arrow-expand-all	arrow-expand-down	arrow-expand-horizontal	arrow-expand-left	arrow-expand-right
28
	arrow-expand-up	arrow-expand-vertical	arrow-expand	arrow-left-bold-box-outline	arrow-left-bold-box	arrow-left-bold-circle-outline	arrow-left-bold-circle	arrow-left-bold-hexagon-outline
29
	arrow-left-bold-outline	arrow-left-bold	arrow-left-box	arrow-left-drop-circle-outline	arrow-left-drop-circle	arrow-left-right-bold-outline	arrow-left-thick	arrow-left
30
	arrow-right-bold-box-outline	arrow-right-bold-box	arrow-right-bold-circle-outline	arrow-right-bold-circle	arrow-right-bold-hexagon-outline	arrow-right-bold-outline	arrow-right-bold	arrow-right-box
31
	arrow-right-drop-circle-outline	arrow-right-drop-circle	arrow-right-thick	arrow-right	arrow-split-horizontal	arrow-split-vertical	arrow-top-left-bold-outline	arrow-top-left-thick
32
	arrow-top-left	arrow-top-right-bold-outline	arrow-top-right-thick	arrow-top-right	arrow-up-bold-box-outline	arrow-up-bold-box	arrow-up-bold-circle-outline	arrow-up-bold-circle
33
	arrow-up-bold-hexagon-outline	arrow-up-bold-outline	arrow-up-bold	arrow-up-box	arrow-up-down-bold-outline	arrow-up-drop-circle-outline	arrow-up-drop-circle	arrow-up-thick
34
	arrow-up	artist	arto-logo	artstation	aspect-ratio	assistant	asterisk	at
35
	atlassian	atom	attachment	audio-video	audiobook	augmented-reality	auto-fix	auto-upload
36
	autorenew	av-timer	aws-logo	axe	azure	babel	baby-buggy	baby
37
	backburger	backspace-outline	backspace	backup-restore	badminton	bag	baidu-paw-logo	balloon
38
	ballot-outline	ballot	bandcamp	bank-transfer-in	bank-transfer-out	bank-transfer	bank	barcode-scan
39
	barcode	barley-off	barley	barn	barrel	baseball-bat	baseball	basecamp-logo
40
	basecamp	basket-fill	basket-unfill	basket	basketball	battery-10-bluetooth	battery-10	battery-20-bluetooth
41
	battery-20	battery-30-bluetooth	battery-30	battery-40-bluetooth	battery-40	battery-50-bluetooth	battery-50	battery-60-bluetooth
42
	battery-60	battery-70-bluetooth	battery-70	battery-80-bluetooth	battery-80	battery-90-bluetooth	battery-90	battery-alert-bluetooth
43
	battery-alert	battery-bluetooth-variant	battery-bluetooth	battery-charging-10	battery-charging-100	battery-charging-20	battery-charging-30	battery-charging-40
44
	battery-charging-50	battery-charging-60	battery-charging-70	battery-charging-80	battery-charging-90	battery-charging-outline	battery-charging-wireless-10	battery-charging-wireless-20
45
	battery-charging-wireless-30	battery-charging-wireless-40	battery-charging-wireless-50	battery-charging-wireless-60	battery-charging-wireless-70	battery-charging-wireless-80	battery-charging-wireless-90	battery-charging-wireless-alert
46
	battery-charging-wireless-outline	battery-charging-wireless	battery-charging	battery-minus	battery-negative	battery-outline	battery-plus	battery-positive
47
	battery-standard	battery-unknown-bluetooth	battery-unknown	battery	battlenet	beach	beaker	beam
48
	beats	bebo-social-network-logo	bed-empty	beer	behance-logo-button	behance-logo	behance	bell-off-outline
49
	bell-off	bell-outline	bell-plus-outline	bell-plus	bell-ring-outline	bell-ring	bell-ringing	bell-sleep-outline
50
	bell-sleep	bell	beta	betamax	bible	bike	bing-logo	bing
51
	binoculars	bio	bitbucket	bitcoin	black-cloud	black-mesa	blackberry	blender
52
	blinds	blip	block-helper	blogger-letter-logotype	blogger	bluetooth-audio	bluetooth-connect	bluetooth-off
53
	bluetooth-settings	bluetooth-transfer	bluetooth	blur-linear	blur-off	blur-radial	blur	bnter-logo
54
	bomb-off	bomb	bone	book-lock-open	book-lock	book-minus	book-multiple-minus	book-multiple-plus
55					(http://s3.amazonaws.com