|
1 | 1 | svg-reactify |
2 | 2 | ============ |
3 | 3 |
|
4 | | -[](https://travis-ci.org/coma/svg-reactify) |
5 | | -[](http://david-dm.org/coma/svg-reactify) |
| 4 | +[](https://travis-ci.org/coma/svg-reactify?branch=v2.x) |
| 5 | +[](http://david-dm.org/coma/svg-reactify/v2.x) |
6 | 6 | [](http://badge.fury.io/js/svg-reactify) |
7 | | - |
8 | 7 |
|
9 | 8 | Transform SVG files into React elements. |
10 | 9 |
|
11 | | -Setup |
12 | | ------ |
| 10 | +Configuration |
| 11 | +------------- |
13 | 12 |
|
14 | | -Without configuration... |
| 13 | +As with most browserify transforms, you can configure it via the second argument to `bundle.transform`: |
15 | 14 |
|
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' }); |
24 | 17 | ``` |
25 | 18 |
|
26 | | -and with some configuration... |
| 19 | +or inside your `package.json` configuration: |
27 | 20 |
|
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 | +} |
41 | 29 | ``` |
42 | 30 |
|
43 | 31 | Requiring SVG files |
@@ -81,15 +69,23 @@ one for symbols for example). |
81 | 69 |
|
82 | 70 | All the templates inherit props to allow passing things like ```className```, ```id```... |
83 | 71 |
|
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: |
85 | 74 |
|
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 | +``` |
87 | 84 |
|
88 | 85 | ### Icon Template |
89 | 86 |
|
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. |
91 | 88 |
|
92 | | -### All Template |
| 89 | +### Image Template |
93 | 90 |
|
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. |
0 commit comments