├── .gitignore
├── .gitattributes
├── test
├── snapshots
│ ├── test.js.snap
│ └── test.js.md
├── fixtures
│ └── foo-bar.svg
└── test.js
├── .editorconfig
├── circle.yml
├── package.json
├── LICENSE
├── README.md
├── index.js
└── yarn.lock
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | * text=auto
2 |
--------------------------------------------------------------------------------
/test/snapshots/test.js.snap:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/egoist/svg-to-component/HEAD/test/snapshots/test.js.snap
--------------------------------------------------------------------------------
/test/fixtures/foo-bar.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | indent_style = space
5 | indent_size = 2
6 | end_of_line = lf
7 | charset = utf-8
8 | trim_trailing_whitespace = true
9 | insert_final_newline = true
10 |
11 | [*.md]
12 | trim_trailing_whitespace = false
--------------------------------------------------------------------------------
/circle.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | jobs:
3 | build:
4 | working_directory: ~/repo
5 | docker:
6 | - image: circleci/node:latest
7 | branches:
8 | ignore:
9 | - gh-pages # list of branches to ignore
10 | - /release\/.*/ # or ignore regexes
11 | steps:
12 | - checkout
13 | - restore_cache:
14 | key: dependency-cache-{{ checksum "yarn.lock" }}
15 | - run:
16 | name: install dependences
17 | command: yarn
18 | - save_cache:
19 | key: dependency-cache-{{ checksum "yarn.lock" }}
20 | paths:
21 | - ./node_modules
22 | - run:
23 | name: test
24 | command: yarn test
25 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "svg-to-component",
3 | "version": "1.2.4",
4 | "description": "Convert SVG to React/Vue components",
5 | "repository": {
6 | "url": "egoist/svg-to-component",
7 | "type": "git"
8 | },
9 | "main": "index.js",
10 | "files": [
11 | "index.js"
12 | ],
13 | "scripts": {
14 | "test": "npm run lint && ava",
15 | "lint": "xo"
16 | },
17 | "engines": {
18 | "node": ">=6"
19 | },
20 | "author": "egoist <0x142857@gmail.com>",
21 | "license": "MIT",
22 | "dependencies": {
23 | "babel-core": "^6.25.0",
24 | "babel-plugin-transform-react-jsx": "^6.24.1",
25 | "babel-preset-vue": "^1.0.2",
26 | "pascal-case": "^2.0.1",
27 | "pify": "^3.0.0"
28 | },
29 | "devDependencies": {
30 | "ava": "^0.21.0",
31 | "eslint-config-rem": "^3.0.0",
32 | "xo": "^0.18.0"
33 | },
34 | "xo": {
35 | "extends": "rem/prettier"
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) EGOIST <0x142857@gmail.com> (https://github.com/egoist)
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/test/test.js:
--------------------------------------------------------------------------------
1 | import path from 'path'
2 | import test from 'ava'
3 | import Svg2Component from '../'
4 |
5 | const svg = ``
8 |
9 | test('from string', t => {
10 | const svg2component = new Svg2Component()
11 | svg2component.fromString(svg, 'my-icon')
12 | t.snapshot(svg2component.toReactComponent(), 'React component')
13 | t.snapshot(svg2component.toVueComponent(), 'Vue component')
14 | })
15 |
16 | test('from string requires component name', t => {
17 | const svg2component = new Svg2Component()
18 |
19 | t.throws(() => svg2component.fromString(svg), 'component name is required')
20 | })
21 |
22 | test('from file', async t => {
23 | const svg2component = new Svg2Component()
24 | await svg2component.fromFile(path.join(__dirname, 'fixtures/foo-bar.svg'))
25 | t.snapshot(svg2component.toReactComponent(), 'React component')
26 | })
27 |
28 | test('from string with custom filepath as name', t => {
29 | const svg2component = new Svg2Component()
30 | svg2component.fromString(svg, '/foo/bar.svg')
31 | t.snapshot(svg2component.toReactComponent(), 'React component name: Bar')
32 | })
33 |
34 | test('toReactComponent: keep jsx', t => {
35 | const svg2component = new Svg2Component()
36 | svg2component.fromString(svg, 'foo')
37 | t.snapshot(
38 | svg2component.toReactComponent({ transformJSX: false }),
39 | 'keep jsx'
40 | )
41 | })
42 |
43 | test('toVueComponent: keep jsx', t => {
44 | const svg2component = new Svg2Component()
45 | svg2component.fromString(svg, 'foo')
46 | t.snapshot(svg2component.toVueComponent({ transformJSX: false }), 'keep jsx')
47 | })
48 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # svg-to-component
3 |
4 | [](https://npmjs.com/package/svg-to-component) [](https://npmjs.com/package/svg-to-component) [](https://circleci.com/gh/egoist/svg-to-component/tree/master) [](https://github.com/egoist/donate)
5 |
6 | ## Install
7 |
8 | ```bash
9 | yarn add svg-to-component
10 | ```
11 |
12 | ## Usage
13 |
14 | ```js
15 | const Svg2Component = require('svg-to-component')
16 |
17 | // Generate React component from SVG string
18 | new Svg2Component()
19 | //...........svg string, component name
20 | .fromString('