Skip to content

Commit 687a365

Browse files
author
Eduardo García Sanz
committed
working and tested...
1 parent 366d353 commit 687a365

18 files changed

Lines changed: 267 additions & 428 deletions

‎.babelrc‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"presets": ["react", "es2015"]
3+
}

‎.eslintrc‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"parser": "babel-eslint",
3+
"rules" : {
4+
"strict" : 0,
5+
"new-cap" : 0,
6+
"eqeqeq" : 2,
7+
"curly" : 2,
8+
"quotes" : [
9+
1,
10+
"single"
11+
],
12+
"no-unreachable" : 2,
13+
"space-before-blocks" : 2,
14+
"space-before-function-paren": 2,
15+
"no-multi-spaces" : 0,
16+
"key-spacing" : 0,
17+
"no-mixed-requires" : 0
18+
}
19+
}

‎.gitignore‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
node_modules
1+
node_modules
2+
/lib

‎.npmignore‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
/src
2+
/test
3+
.babelrc
4+
.eslintrc
5+
.gitignore
6+
.travis.yml

‎.travis.yml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
language: node_js
2-
node_js :
3-
- "iojs"
42
deploy:
53
provider: npm
64
email: eduardo@comakai.com

‎index.js‎

Lines changed: 0 additions & 122 deletions
This file was deleted.

‎package.json‎

Lines changed: 42 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,58 @@
11
{
2-
"name" : "svg-reactify",
3-
"description" : "transform SVG files into React elements",
4-
"homepage" : "https://github.com/coma/svg-reactify",
5-
"repository" : "https://github.com/coma/svg-reactify",
6-
"main" : "./index.js",
7-
"version" : "1.1.1",
8-
"license" : "MIT",
9-
"private" : false,
10-
"author" : "Eduardo García Sanz <eduardo@comakai.com>",
11-
"contributors" : [
2+
"name" : "svg-reactify",
3+
"description" : "transform SVG files into React elements",
4+
"homepage" : "https://github.com/coma/svg-reactify",
5+
"repository" : {
6+
"type": "git",
7+
"url" : "git://github.com/coma/svg-reactify.git"
8+
},
9+
"version" : "2.0.0",
10+
"main" : "lib",
11+
"license" : "MIT",
12+
"private" : false,
13+
"author" : "Eduardo García Sanz <eduardo@comakai.com>",
14+
"contributors" : [
1215
"Matthew Brandly <matt@brandly.me>",
1316
"Anders Stalheim Øfsdahl <https://github.com/andersaloof>"
1417
],
15-
"keywords" : [
18+
"keywords" : [
1619
"browserify",
1720
"react",
1821
"reactjs",
1922
"svg",
2023
"browserify-transform"
2124
],
22-
"dependencies" : {
23-
"through" : "2.3",
24-
"react" : "0.14",
25-
"react-addons-test-utils": "0.14",
26-
"babel" : "5.8",
27-
"svgo" : "0.5",
28-
"extend" : "3.0",
29-
"underscore.string": "3.2"
25+
"dependencies" : {
26+
"babel-core" : "6.5",
27+
"babel-preset-react" : "6.5",
28+
"lodash.camelcase" : "4.1",
29+
"lodash.kebabcase" : "4.0",
30+
"svgo" : "0.6",
31+
"through2" : "2.0"
3032
},
31-
"devDependencies": {
32-
"jsdom" : "5.4",
33-
"mocha" : "2.2",
34-
"should": "7.0",
35-
"eslint": "1.1"
33+
"peerDependencies": {
34+
"react": "0.14"
3635
},
37-
"scripts" : {
38-
"lint": "eslint index.js",
39-
"test": "npm run lint && mocha"
36+
"devDependencies" : {
37+
"babel-cli" : "6.5",
38+
"babel-eslint" : "5.0",
39+
"babel-preset-es2015" : "6.5",
40+
"enzyme" : "2.0",
41+
"eslint" : "2.2",
42+
"react" : "0.14",
43+
"react-addons-test-utils": "0.14",
44+
"react-dom" : "0.14",
45+
"tape" : "4.4"
4046
},
41-
"engines" : {
42-
"iojs": ">= 1.0.0",
43-
"node": ">= 0.11.0"
47+
"scripts" : {
48+
"clean" : "rm -rf ./lib",
49+
"lint" : "eslint src",
50+
"build" : "npm run clean && babel src --out-dir lib",
51+
"test" : "babel-node test",
52+
"fooo" : "npm run lint && babel-node test && npm run build",
53+
"prepublish": "npm test && npm run build"
4454
},
45-
"eslintConfig" : {
46-
"env" : {
47-
"node": true
48-
},
49-
"rules" : {
50-
"strict" : 0,
51-
"new-cap" : 0,
52-
"eqeqeq" : 2,
53-
"curly" : 2,
54-
"quotes" : [
55-
1,
56-
"single"
57-
],
58-
"no-unreachable" : 2,
59-
"space-before-blocks" : 2,
60-
"space-before-function-paren": 2,
61-
"no-multi-spaces" : 0,
62-
"key-spacing" : 0,
63-
"no-mixed-requires" : 0,
64-
"no-use-before-define" : 0,
65-
"no-underscore-dangle" : 0
66-
}
55+
"engines" : {
56+
"node": "> 4.0.0"
6757
}
6858
}

‎src/index.js‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import { basename } from 'path';
2+
import { transform as babel } from 'babel-core';
3+
import react from 'babel-preset-react';
4+
import SVGO from 'svgo';
5+
import through from 'through2';
6+
import camelCase from 'lodash.camelcase';
7+
import kebabCase from 'lodash.kebabcase';
8+
import template from './template';
9+
10+
const SVG_REGEX = /\.svg$/i,
11+
ATTR_REGEX = /(class|clip-path|fill-opacity|font-family|font-size|marker-end|marker-mid|marker-start|stop-color|stop-opacity|stroke-width|stroke-linecap|stroke-dasharray|stroke-opacity|text-anchor)=/g;
12+
13+
const svgo = new SVGO({
14+
plugins: [
15+
{removeViewBox: false},
16+
{removeUselessStrokeAndFill: false}
17+
]
18+
});
19+
20+
const babelOptions = {
21+
presets: [react]
22+
};
23+
24+
function camelizeAttrs (code) {
25+
26+
return code.replace(ATTR_REGEX, (line, attr) => {
27+
28+
return attr !== 'class' ? camelCase(attr) + '=' : 'className='
29+
});
30+
}
31+
32+
function transform (code) {
33+
34+
return babel(camelizeAttrs(code), babelOptions).code;
35+
}
36+
37+
function createTransformer (filename, template) {
38+
39+
const name = kebabCase(basename(filename, '.svg'));
40+
41+
let buffer = '';
42+
43+
function handleStream (chunk, encoding, next) {
44+
45+
buffer += chunk.toString();
46+
next();
47+
}
48+
49+
function finishStream (next) {
50+
51+
svgo.optimize(buffer, svg => {
52+
53+
this.push(template(name, transform(svg.data)));
54+
next();
55+
});
56+
}
57+
58+
return through(handleStream, finishStream);
59+
}
60+
61+
export default (filename, options = {}) => {
62+
63+
if (!SVG_REGEX.test(filename)) {
64+
65+
return through();
66+
}
67+
68+
const type = Object
69+
.keys(template)
70+
.find(t => options[t] && (new RegExp(options[t])).test(filename));
71+
72+
return createTransformer(filename, template[type || options.default || 'icon']);
73+
};

‎src/template/icon.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export default (name, svg) => `var React = require('react'), SVG = ${ svg }
2+
3+
module.exports = React.createClass({
4+
displayName: 'svg-${ name }',
5+
getDefaultProps: function () {
6+
7+
return {
8+
className: 'icon icon-${ name }'
9+
};
10+
},
11+
render: function () {
12+
13+
return React.createElement('span', this.props, SVG);
14+
}
15+
});`;

‎src/template/image.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
export default (name, svg) => `var React = require('react'), SVG = ${ svg }
2+
3+
module.exports = React.createClass({
4+
displayName: 'svg-${ name }',
5+
render : function () {
6+
7+
return SVG;
8+
}
9+
});`;

0 commit comments

Comments
 (0)