diff --git a/README.md b/README.md index 8a9dcd6..6e58d9d 100644 --- a/README.md +++ b/README.md @@ -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 ; + return ; } } ``` @@ -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 diff --git a/components/svg.js b/components/svg.js index 348268d..9451027 100644 --- a/components/svg.js +++ b/components/svg.js @@ -10,11 +10,11 @@ * * @author Ryan McGrath , 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 tag or an 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; diff --git a/index.js b/index.js index af5e1ad..073df3e 100644 --- a/index.js +++ b/index.js @@ -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 React JSX tag that ties in with + * - An easy to use 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 tag will also transparently handle adding + * module. The 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 @@ -62,6 +60,11 @@ var SVGPack = function(options) { this.opts = merge({ 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 @@ -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 + * A Babel "plugin/transformer" that just tracks unique * 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,20 +196,11 @@ 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 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 - * 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 * 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". * @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 = '', - patch = '