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:
@ -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.
- _**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
==============
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
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
verbose: false,
// An Array of JSX tags that you want this to catch - helpful
// for overriding.
JSXTagNames: ['Icon'],
// Which mode this is running in
mode: 'svg',
// 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,
// 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.
svgo: {
plugins: [
@ -84,11 +88,11 @@ You're now good to go! These two plugins will talk to each other and handle crea
``` javascript
import React from 'react';
import SVG from 'react-svgpack';
import Icon from 'react-iconpack';
class IconShowcase extends React.Component {
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.
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
// to, you can override it here.
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.
```javascript
var SVGPack = require('react-svgpack');
var packer = new SVGPack({
var IconPacker = require('react-iconpack');
var packer = new IconPacker({
mode: 'png',
png: {
// Your desired options, if applicable

16
components/svg.js
View file

@ -10,11 +10,11 @@
*
* @author Ryan McGrath <ryan@venodesigns.net>, contributors (see repo)
* @license MIT
* @repo https://github.com/ryanmcgrath/react-svgpack/
* @repo https://github.com/ryanmcgrath/react-iconpack/
*/
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
* 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.
*
* @class
*/
var SVG = React.createClass({
module.exports = React.createClass({
/**
* 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
@ -183,7 +183,7 @@ var SVG = React.createClass({
) continue;
if(prop === 'className')
props.className = 'react-svgpack-icon ' + this.props.className;
props.className = 'react-iconpack-icon ' + this.props.className;
props[prop] = this.props[prop];
}
@ -226,7 +226,7 @@ var SVG = React.createClass({
// We always want our specific className here, for target-ability
// between modes. User should always be able to append theirs though.
if(prop === 'className') {
props.className = 'react-svgpack-icon ' + this.props.className;
props.className = 'react-iconpack-icon ' + this.props.className;
continue;
}
@ -252,7 +252,3 @@ var SVG = React.createClass({
}));
}
});
// Go forth, lol
module.exports = SVG;

78
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 Babel transformer/plugin that determines which SVG
* files you actually want to load, straight from your
* 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.
*
* - A Browserify plugin that will grab your SVG files, optimize
* 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.
*
* - 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?
* Send a pull request. :)
@ -41,17 +41,15 @@ try {
/**
* SVGPack, constructor. The only truly required option is the
* "svgSourceDirectory", which should be the full path to the root
* directory where your source SVGs are located.
* IconPackerer constructor.
*
* @constructor
* @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) {
if(!(this instanceof SVGPack))
return new SVGPack(options);
var IconPacker = function(options) {
if(!(this instanceof IconPacker))
return new IconPacker(options);
// This is a reference to the directory where we've got
// provided SVG files held. The user can specify a root directory of
@ -63,6 +61,11 @@ var SVGPack = function(options) {
verbose: false,
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
// project; users can override but keep in mind that it's ill-advised at the time
// of writing this to remove the viewBox attributes. This may change in a later release.
@ -135,7 +138,7 @@ var SVGPack = function(options) {
*
* @param {Function} callback Upon completion this junks runs.
*/
SVGPack.prototype._readAndOptimizeSVGs = function(key, callback) {
IconPacker.prototype._readAndOptimizeSVGs = function(key, callback) {
var packer = this,
internalFilePath = this._internalSVGDirectory + 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
* modifications - just accumulates the unique SVG uris for the mapping.
*
* @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.
*/
SVGPack.prototype._SVGTracker = function(babel) {
IconPacker.prototype._SVGTracker = function(babel) {
var packer = this;
return new babel.Transformer('react-svgpack', {
return new babel.Transformer('react-iconpack', {
JSXElement: function JSXElement(node, parent, scope, file) {
if(node.openingElement.name.name !== 'SVG')
if(packer.opts.JSXTagNames.indexOf(node.openingElement.name.name) < 0)
return;
var attributes = node.openingElement.attributes,
@ -193,19 +196,10 @@ SVGPack.prototype._SVGTracker = function(babel) {
/**
* 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()
* 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';
* your icons and a tag as a require()-able module.
*
* 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/>
* tag library into your bundle, importable as "react-svgpack".
* it out.
*
* 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
@ -218,13 +212,13 @@ SVGPack.prototype._SVGTracker = function(babel) {
* @param {String} imgType Either "png" or "svg".
* @returns {Object} browserify The instance being operated on.
*/
SVGPack.prototype._BrowserifyInjector = function(browserify, opts) {
IconPacker.prototype._BrowserifyInjector = function(browserify, opts) {
var startListeningToThisCompleteMessOfALibraryAgain = function() {
browserify.pipeline.get('pack').unshift(this.compile());
}.bind(this);
browserify.external('react-svgpack');
browserify.external('react-svgpack-icons');
browserify.external('react-iconpack');
browserify.external('react-iconpack-icons');
browserify.on('reset', startListeningToThisCompleteMessOfALibraryAgain);
startListeningToThisCompleteMessOfALibraryAgain();
return browserify;
@ -241,7 +235,7 @@ SVGPack.prototype._BrowserifyInjector = function(browserify, opts) {
*
* @returns {Function} A through2 stream in object mode, which Browserify needs.
*/
SVGPack.prototype.compile = function() {
IconPacker.prototype.compile = function() {
var packer = this,
write = function(buf, enc, next) {
next(null, buf);
@ -254,9 +248,9 @@ SVGPack.prototype.compile = function() {
async.map(keys, packer.readAndOptimizeSVGs, function(error, results) {
fs.readFile(ReactSVGComponentFilePath, 'utf8', function(e, data) {
stream.push({
id: 'react-svgpack',
externalRequireName: 'react-svgpack',
standaloneModule: 'react-svgpack',
id: 'react-iconpack',
externalRequireName: 'react-iconpack',
standaloneModule: 'react-iconpack',
hasExports: true,
source: data,
@ -267,9 +261,9 @@ SVGPack.prototype.compile = function() {
});
var icons = {
id: 'react-svgpack-icons',
externalRequireName: 'react-svgpack-icons',
standaloneModule: 'react-svgpack-icons',
id: 'react-iconpack-icons',
externalRequireName: 'react-iconpack-icons',
standaloneModule: 'react-iconpack-icons',
hasExports: true,
deps: {}
};
@ -304,7 +298,7 @@ SVGPack.prototype.compile = function() {
*
* @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),
key,
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.
*/
SVGPack.prototype.compilePNGs = function(hollaback) {
IconPacker.prototype.compilePNGs = function(hollaback) {
var packer = this,
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 {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,
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));
// 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?
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.",
"author": "Ryan McGrath",
"version": "1.0.0",
@ -37,7 +37,7 @@
"repository": {
"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"}
}