Skip to content

Commit 5004361

Browse files
author
Eduardo García Sanz
committed
releasing this as an alpha version
1 parent 7aa44d6 commit 5004361

2 files changed

Lines changed: 31 additions & 35 deletions

File tree

README.md

Lines changed: 30 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,31 @@
11
svg-reactify
22
============
33

4-
[![Build Status](https://travis-ci.org/coma/svg-reactify.png?branch=master)](https://travis-ci.org/coma/svg-reactify)
5-
[![Dependency Status](https://david-dm.org/coma/svg-reactify.png)](http://david-dm.org/coma/svg-reactify)
4+
[![Build Status](https://travis-ci.org/coma/svg-reactify.png?branch=v2.x)](https://travis-ci.org/coma/svg-reactify?branch=v2.x)
5+
[![Dependency Status](https://david-dm.org/coma/svg-reactify/v2.x.png)](http://david-dm.org/coma/svg-reactify/v2.x)
66
[![NPM version](https://badge.fury.io/js/svg-reactify.png)](http://badge.fury.io/js/svg-reactify)
7-
![io.js supported](https://img.shields.io/badge/io.js-supported-green.svg?style=flat)
87

98
Transform SVG files into React elements.
109

11-
Setup
12-
-----
10+
Configuration
11+
-------------
1312

14-
Without configuration...
13+
As with most browserify transforms, you can configure it via the second argument to `bundle.transform`:
1514

16-
```javascript
17-
var browserify = require('browserify'),
18-
svgrt = require('svg-reactify');
19-
20-
browserify({
21-
transform: [svgrt]
22-
})
23-
.bundle()
15+
```js
16+
bundle.transform(require('svg-reactify'), { default: 'image' });
2417
```
2518

26-
and with some configuration...
19+
or inside your `package.json` configuration:
2720

28-
```javascript
29-
var browserify = require('browserify'),
30-
svgrt = require('svg-reactify');
31-
32-
browserify({
33-
transform: [svgrt({
34-
svgo : {}, // options passed to svgo
35-
react : {}, // options passed to react-tools
36-
template: 'all', // Choose from all, icon and svg (svg is the default)
37-
type : 'icon' // Choose from icon and svg (svg is the default)
38-
})]
39-
})
40-
.bundle()
21+
```json
22+
{
23+
"browserify": {
24+
"transform": [
25+
["svg-reactify", { "default": "image" }]
26+
]
27+
}
28+
}
4129
```
4230

4331
Requiring SVG files
@@ -81,15 +69,23 @@ one for symbols for example).
8169

8270
All the templates inherit props to allow passing things like ```className```, ```id```...
8371

84-
### SVG Template
72+
You can select one type as default by setting the default option to ```image``` or to ```icon``` and also setting a
73+
regex string like:
8574

86-
The default one, having the ```<svg>``` as the root.
75+
```json
76+
{
77+
"browserify": {
78+
"transform": [
79+
["svg-reactify", { "default": "image", "icon": ".icon" }]
80+
]
81+
}
82+
}
83+
```
8784

8885
### Icon Template
8986

90-
This one has an ```<span class="icon icon-__SLUG_FROM FILES_NAME__>``` as the root.
87+
This one has an ```<span class="icon icon-__FILENAME_IN_KEBABCASE__>``` as the root.
9188

92-
### All Template
89+
### Image Template
9390

94-
This one can be configured through the ```type``` prop to finally render as one of the above. The default type
95-
is svg but you can change it passing the type to the transform's config.
91+
The default one, having the ```<svg>``` as the root.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
"type": "git",
77
"url" : "git://github.com/coma/svg-reactify.git"
88
},
9-
"version" : "2.0.0",
9+
"version" : "2.0.0-alpha.1",
1010
"main" : "lib",
1111
"license" : "MIT",
1212
"private" : false,

0 commit comments

Comments
 (0)