code/react-iconpack
Archived
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

Name change

Browse source
This commit is contained in:
Ryan McGrath 2015-08-03 03:21:39 +09:00
parent f2c495952f
commit 44c7e718b0
4 changed files with 64 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

32
README.md
View file

@ -1,4 +1,4 @@
react-svgpack react-iconpack
============== ==============
This project provides a way to utilize SVG icons in React-based projects with easy fallback to PNGs for browsers that don't have SVG support. It provides three pieces: This project provides a way to utilize SVG icons in React-based projects with easy fallback to PNGs for browsers that don't have SVG support. It provides three pieces:
@ -8,32 +8,36 @@ This project provides a way to utilize SVG icons in React-based projects with ea
- The aforementioned **React Component**, which transparently handles mapping between SVG and IMG tags in various browsers. It's optimized to be fast, and comes with no external dependencies beyond React itself. - The aforementioned **React Component**, which transparently handles mapping between SVG and IMG tags in various browsers. It's optimized to be fast, and comes with no external dependencies beyond React itself.
- _**Bonus:**_ react-svgpack ships with **over 1,000 ready to use SVG icons** from various different open source projects. Hit the ground running and avoid the tedious task of gathering all the assets you need. - _**Bonus:**_ react-iconpack ships with **over 1,000 ready to use SVG icons** from various different open source projects. Hit the ground running and avoid the tedious task of gathering all the assets you need.
Installation and Usage Installation and Usage
============== ==============
react-svgpack is currently delivered via npm; if there's some other module vendor system that people want to utilize open a pull request and I'll take a look at it. react-iconpack is currently delivered via npm; if there's some other module vendor system that people want to utilize open a pull request and I'll take a look at it.
npm install react-svgpack npm install react-iconpack
Configuration is pretty straightforward - create an instance of SVGPack and supply the options you want. There are some sensible defaults which are highlighted below. Configuration is pretty straightforward - create an instance of IconPacker and supply the options you want. There are some sensible defaults which are highlighted below.
``` javascript ``` javascript
var SVGPack = require('react-svgpack'); var IconPacker = require('react-iconpack');
var packer = new SVGPack({ var packer = new IconPacker({
// If you need more details about the packing process // If you need more details about the packing process
verbose: false, verbose: false,
// An Array of JSX tags that you want this to catch - helpful
// for overriding.
JSXTagNames: ['Icon'],
// Which mode this is running in // Which mode this is running in
mode: 'svg', mode: 'svg',
// Optional: You can provide your own SVG source directory here. // Optional: You can provide your own SVG source directory here.
// SVGPack will then look here for any custom-supplied icons. // IconPacker will then look here for any custom-supplied icons.
svgSourceDirectory: null, svgSourceDirectory: null,
// SVGPack uses svgo behind the scenes, and can pass your // IconPacker uses svgo behind the scenes, and can pass your
// configuration directly to the SVGO constructor/instance. // configuration directly to the SVGO constructor/instance.
svgo: { svgo: {
plugins: [ plugins: [
@ -84,11 +88,11 @@ You're now good to go! These two plugins will talk to each other and handle crea
``` javascript ``` javascript
import React from 'react'; import React from 'react';
import SVG from 'react-svgpack'; import Icon from 'react-iconpack';
class IconShowcase extends React.Component { class IconShowcase extends React.Component {
render() { render() {
return <SVG uri="polymer/notification/disc_full" width="48" height="48"/>; return <Icon uri="polymer/notification/disc_full" width="48" height="48"/>;
} }
} }
``` ```
@ -107,7 +111,7 @@ The included React Component handles a lot of annoying stuff for you. The breakd
// The icon identifier to be specified. // The icon identifier to be specified.
uri: null, uri: null,
// react-svgpack default icons come preconfigured with a viewBox // react-iconpack default icons come preconfigured with a viewBox
// so that you don't have to think about it, but if you ever need // so that you don't have to think about it, but if you ever need
// to, you can override it here. // to, you can override it here.
viewBox: null, viewBox: null,
@ -192,8 +196,8 @@ This is an optional installation because the PNGQuant installation could throw w
With that all said and done, it's as simple as swapping the mode from _'svg'_ to _'png'_. In PNG mode, the library will convert the SVGs you're using into base64 PNG equivalents. IE8 has a ~32kb PNG URI limit, but so far I've yet to find an icon that crosses that. With that all said and done, it's as simple as swapping the mode from _'svg'_ to _'png'_. In PNG mode, the library will convert the SVGs you're using into base64 PNG equivalents. IE8 has a ~32kb PNG URI limit, but so far I've yet to find an icon that crosses that.
```javascript ```javascript
var SVGPack = require('react-svgpack'); var IconPacker = require('react-iconpack');
var packer = new SVGPack({ var packer = new IconPacker({
mode: 'png', mode: 'png',
png: { png: {
// Your desired options, if applicable // Your desired options, if applicable

16
components/svg.js
View file

@ -10,11 +10,11 @@
* *
* @author Ryan McGrath <ryan@venodesigns.net>, contributors (see repo) * @author Ryan McGrath <ryan@venodesigns.net>, contributors (see repo)
* @license MIT * @license MIT
* @repo https://github.com/ryanmcgrath/react-svgpack/ * @repo https://github.com/ryanmcgrath/react-iconpack/
*/ */
var React = require('react'); var React = require('react');
icons = require('react-svgpack-icons'); icons = require('react-iconpack-icons');
/** /**
@ -31,12 +31,12 @@ var warn = function(msg) {
/** /**
* The main JSX tag you'll be wanting. Depending on which mode your bundle is * The main JSX tag you'll be wanting. Depending on which mode your bundle is
* in, it will handle injecting either an <svg> tag or an <img> tag. For any global * in, it will handle injecting either an <svg> tag or an <img> tag. For any global
* styling needs you can safely target the "react-svgpack-icon" class in CSS - you * styling needs you can safely target the "react-iconpack-icon" class in CSS - you
* can also add your own, of course, but there's one there for convenience. * can also add your own, of course, but there's one there for convenience.
* *
* @class * @class
*/ */
var SVG = React.createClass({ module.exports = React.createClass({
/** /**
* More or less internal method for React; just configures an initial default * More or less internal method for React; just configures an initial default
* setup for properties. You can refer to this as a general guide on what you * setup for properties. You can refer to this as a general guide on what you
@ -183,7 +183,7 @@ var SVG = React.createClass({
) continue; ) continue;
if(prop === 'className') if(prop === 'className')
props.className = 'react-svgpack-icon ' + this.props.className; props.className = 'react-iconpack-icon ' + this.props.className;
props[prop] = this.props[prop]; props[prop] = this.props[prop];
} }
@ -226,7 +226,7 @@ var SVG = React.createClass({
// We always want our specific className here, for target-ability // We always want our specific className here, for target-ability
// between modes. User should always be able to append theirs though. // between modes. User should always be able to append theirs though.
if(prop === 'className') { if(prop === 'className') {
props.className = 'react-svgpack-icon ' + this.props.className; props.className = 'react-iconpack-icon ' + this.props.className;
continue; continue;
} }
@ -252,7 +252,3 @@ var SVG = React.createClass({
})); }));
} }
}); });
// Go forth, lol
module.exports = SVG;

80
index.js
View file

@ -1,21 +1,21 @@
/** /**
* SVGPack is a library to make automating SVG/PNG usage in React * react-iconpack is a library to make automating SVG/PNG icon usage in React
* a bit more streamlined. It consists of a few key components: * a bit more streamlined. It consists of a few key components:
* *
* - A Babel transformer/plugin that determines which SVG * - A Babel transformer/plugin that determines which SVG
* files you actually want to load, straight from your * files you actually want to load, straight from your
* source. * source.
* *
* - An easy to use <SVG.../> React JSX tag that ties in with * - An easy to use <Icon.../> React JSX tag that ties in with
* this library. * this library.
* *
* - A Browserify plugin that will grab your SVG files, optimize * - A Browserify plugin that will grab your SVG files, optimize
* them, and auto-inject them into your bundle as a require()-able * them, and auto-inject them into your bundle as a require()-able
* module. The <SVG.../> tag will also transparently handle adding * module. The <Icon.../> tag will also transparently handle adding
* things to the browser document for you. * things to the browser document for you.
* *
* - Bonus: For browsers that don't support PNG (e.g, IE8) you can * - Bonus: For browsers that don't support PNG (e.g, IE8) you can
* instruct SVGPack to build a module with base64'd PNGs. * instruct IconPacker to build a module with base64'd PNGs.
* *
* Found a bug, use Webpack, need binary pngs instead of base64? * Found a bug, use Webpack, need binary pngs instead of base64?
* Send a pull request. :) * Send a pull request. :)
@ -41,17 +41,15 @@ try {
/** /**
* SVGPack, constructor. The only truly required option is the * IconPackerer constructor.
* "svgSourceDirectory", which should be the full path to the root
* directory where your source SVGs are located.
* *
* @constructor * @constructor
* @param {Object} options Options * @param {Object} options Options
* @return {Object} An instance of SVGPack to do things with. * @return {Object} An instance of IconPacker to do things with.
*/ */
var SVGPack = function(options) { var IconPacker = function(options) {
if(!(this instanceof SVGPack)) if(!(this instanceof IconPacker))
return new SVGPack(options); return new IconPacker(options);
// This is a reference to the directory where we've got // This is a reference to the directory where we've got
// provided SVG files held. The user can specify a root directory of // provided SVG files held. The user can specify a root directory of
@ -62,6 +60,11 @@ var SVGPack = function(options) {
this.opts = merge({ this.opts = merge({
verbose: false, verbose: false,
mode: 'svg', mode: 'svg',
// JSX tags to pick up
JSXTagNames: ['Icon'],
injectReactComponent: true,
iconLibraryNamespace: 'react-iconpack-icons',
// We provide some default SVGO options that work well for the icons in this // We provide some default SVGO options that work well for the icons in this
// project; users can override but keep in mind that it's ill-advised at the time // project; users can override but keep in mind that it's ill-advised at the time
@ -135,7 +138,7 @@ var SVGPack = function(options) {
* *
* @param {Function} callback Upon completion this junks runs. * @param {Function} callback Upon completion this junks runs.
*/ */
SVGPack.prototype._readAndOptimizeSVGs = function(key, callback) { IconPacker.prototype._readAndOptimizeSVGs = function(key, callback) {
var packer = this, var packer = this,
internalFilePath = this._internalSVGDirectory + key + '.svg', internalFilePath = this._internalSVGDirectory + key + '.svg',
filePath = packer.opts.svgSourceDirectory + key + '.svg'; filePath = packer.opts.svgSourceDirectory + key + '.svg';
@ -161,19 +164,19 @@ SVGPack.prototype._readAndOptimizeSVGs = function(key, callback) {
/** /**
* A Babel "plugin/transformer" that just tracks unique <SVG.../> * A Babel "plugin/transformer" that just tracks unique <Icon.../>
* JSX tags in your source code. Note that this does absolutely no * JSX tags in your source code. Note that this does absolutely no
* modifications - just accumulates the unique SVG uris for the mapping. * modifications - just accumulates the unique SVG uris for the mapping.
* *
* @param {Object} babel This will be auto-passed, most likely, by Babel. * @param {Object} babel This will be auto-passed, most likely, by Babel.
* @returns {Object} babel.Transformer used for the babel'ing. You know the one. * @returns {Object} babel.Transformer used for the babel'ing. You know the one.
*/ */
SVGPack.prototype._SVGTracker = function(babel) { IconPacker.prototype._SVGTracker = function(babel) {
var packer = this; var packer = this;
return new babel.Transformer('react-svgpack', { return new babel.Transformer('react-iconpack', {
JSXElement: function JSXElement(node, parent, scope, file) { JSXElement: function JSXElement(node, parent, scope, file) {
if(node.openingElement.name.name !== 'SVG') if(packer.opts.JSXTagNames.indexOf(node.openingElement.name.name) < 0)
return; return;
var attributes = node.openingElement.attributes, var attributes = node.openingElement.attributes,
@ -193,20 +196,11 @@ SVGPack.prototype._SVGTracker = function(babel) {
/** /**
* A Browserify plugin that hooks in to the Browserify build pipeline and injects * A Browserify plugin that hooks in to the Browserify build pipeline and injects
* your icons as a require()-able module. Really you don't even need to require() * your icons and a tag as a require()-able module.
* them down the road as the <SVG.../> tag will handle injecting it for you, but
* it could prove useful in some cases I suppose - JUST:
*
* var icons = require('react-svgpack-icons');
*
* or if you're into that ES6:
*
* import icons from 'react-svgpack-icons';
* *
* If you use another module loader or something I'm sure you can probably figure * If you use another module loader or something I'm sure you can probably figure
* it out - I tend to stick with the above. This also handles injecting the <SVG/> * it out.
* tag library into your bundle, importable as "react-svgpack". *
*
* Originally I wanted to find a way to just have Babel shove this in, but I * Originally I wanted to find a way to just have Babel shove this in, but I
* couldn't figure out a way to do it cleanly so this works. If you use Webpack * couldn't figure out a way to do it cleanly so this works. If you use Webpack
* and would like to see a plugin like this, pull requests are welcome. * and would like to see a plugin like this, pull requests are welcome.
@ -218,13 +212,13 @@ SVGPack.prototype._SVGTracker = function(babel) {
* @param {String} imgType Either "png" or "svg". * @param {String} imgType Either "png" or "svg".
* @returns {Object} browserify The instance being operated on. * @returns {Object} browserify The instance being operated on.
*/ */
SVGPack.prototype._BrowserifyInjector = function(browserify, opts) { IconPacker.prototype._BrowserifyInjector = function(browserify, opts) {
var startListeningToThisCompleteMessOfALibraryAgain = function() { var startListeningToThisCompleteMessOfALibraryAgain = function() {
browserify.pipeline.get('pack').unshift(this.compile()); browserify.pipeline.get('pack').unshift(this.compile());
}.bind(this); }.bind(this);
browserify.external('react-svgpack'); browserify.external('react-iconpack');
browserify.external('react-svgpack-icons'); browserify.external('react-iconpack-icons');
browserify.on('reset', startListeningToThisCompleteMessOfALibraryAgain); browserify.on('reset', startListeningToThisCompleteMessOfALibraryAgain);
startListeningToThisCompleteMessOfALibraryAgain(); startListeningToThisCompleteMessOfALibraryAgain();
return browserify; return browserify;
@ -241,7 +235,7 @@ SVGPack.prototype._BrowserifyInjector = function(browserify, opts) {
* *
* @returns {Function} A through2 stream in object mode, which Browserify needs. * @returns {Function} A through2 stream in object mode, which Browserify needs.
*/ */
SVGPack.prototype.compile = function() { IconPacker.prototype.compile = function() {
var packer = this, var packer = this,
write = function(buf, enc, next) { write = function(buf, enc, next) {
next(null, buf); next(null, buf);
@ -254,9 +248,9 @@ SVGPack.prototype.compile = function() {
async.map(keys, packer.readAndOptimizeSVGs, function(error, results) { async.map(keys, packer.readAndOptimizeSVGs, function(error, results) {
fs.readFile(ReactSVGComponentFilePath, 'utf8', function(e, data) { fs.readFile(ReactSVGComponentFilePath, 'utf8', function(e, data) {
stream.push({ stream.push({
id: 'react-svgpack', id: 'react-iconpack',
externalRequireName: 'react-svgpack', externalRequireName: 'react-iconpack',
standaloneModule: 'react-svgpack', standaloneModule: 'react-iconpack',
hasExports: true, hasExports: true,
source: data, source: data,
@ -267,9 +261,9 @@ SVGPack.prototype.compile = function() {
}); });
var icons = { var icons = {
id: 'react-svgpack-icons', id: 'react-iconpack-icons',
externalRequireName: 'react-svgpack-icons', externalRequireName: 'react-iconpack-icons',
standaloneModule: 'react-svgpack-icons', standaloneModule: 'react-iconpack-icons',
hasExports: true, hasExports: true,
deps: {} deps: {}
}; };
@ -304,7 +298,7 @@ SVGPack.prototype.compile = function() {
* *
* @returns {String} The source for this "module" as a String, which Browserify needs. * @returns {String} The source for this "module" as a String, which Browserify needs.
*/ */
SVGPack.prototype.compileSVGs = function() { IconPacker.prototype.compileSVGs = function() {
var keys = Object.keys(this.SVGS), var keys = Object.keys(this.SVGS),
key, key,
i = 0, i = 0,
@ -340,7 +334,7 @@ SVGPack.prototype.compileSVGs = function() {
* *
* @param {Function} hollaback Called when all the PNGs be converted and the code's done. * @param {Function} hollaback Called when all the PNGs be converted and the code's done.
*/ */
SVGPack.prototype.compilePNGs = function(hollaback) { IconPacker.prototype.compilePNGs = function(hollaback) {
var packer = this, var packer = this,
keys = Object.keys(this.SVGS); keys = Object.keys(this.SVGS);
@ -377,10 +371,10 @@ SVGPack.prototype.compilePNGs = function(hollaback) {
* @param {String} key A key for the internal SVGS object. * @param {String} key A key for the internal SVGS object.
* @param {Function} callback A callback that runs when the PNG is ready. * @param {Function} callback A callback that runs when the PNG is ready.
*/ */
SVGPack.prototype.convertSVGtoPNG = function(key, callback) { IconPacker.prototype.convertSVGtoPNG = function(key, callback) {
var packer = this, var packer = this,
xml = '<?xml version="1.0" encoding="utf-8"?>', xml = '<?xml version="1.0" encoding="utf-8"?>',
patch = '<svg width="32" height="32" preserveAspectRatio="xMinYMin meet" ', patch = '<svg width="32" height="32" preserveAspectRatio="xMidYMid meet" ',
svg = new Buffer(xml + this.SVGS[key].data.replace('<svg ', patch)); svg = new Buffer(xml + this.SVGS[key].data.replace('<svg ', patch));
// I'll be honest, chaining APIs annoy me - just lemme use an options object. // I'll be honest, chaining APIs annoy me - just lemme use an options object.
@ -405,4 +399,4 @@ SVGPack.prototype.convertSVGtoPNG = function(key, callback) {
// You get that thing I sent ya? // You get that thing I sent ya?
module.exports = SVGPack; module.exports = IconPacker;

6
package.json
View file

@ -1,5 +1,5 @@
{ {
"name": "react-svgpack", "name": "react-iconpack",
"description": "A React Component for handling SVGs coupled with Babel and Browserify plugins to only bundle the SVGs you use.", "description": "A React Component for handling SVGs coupled with Babel and Browserify plugins to only bundle the SVGs you use.",
"author": "Ryan McGrath", "author": "Ryan McGrath",
"version": "1.0.0", "version": "1.0.0",
@ -37,7 +37,7 @@
"repository": { "repository": {
"type": "git", "type": "git",
"url": "https://github.com/ryanmcgrath/react-svgpack.git" "url": "https://github.com/ryanmcgrath/react-iconpack.git"
}, },
"bugs": {"url": "https://github.com/ryanmcgrath/react-svgpack/issues"} "bugs": {"url": "https://github.com/ryanmcgrath/react-iconpack/issues"}
} }