├── example
├── .gitignore
├── index.html
├── .babelrc
├── index.js
├── dummy.svg
├── package.json
├── webpack.config.js
├── rollup.config.js
├── her.svg
├── image.svg
└── yarn.lock
├── packages
├── react-svg-core
│ ├── README.md
│ ├── tsconfig.json
│ ├── src
│ │ ├── index.ts
│ │ └── svgo.ts
│ └── package.json
├── lodash.isplainobject.d.ts
├── babel-plugin-react-svg
│ ├── tsconfig.json
│ ├── src
│ │ ├── camelize.ts
│ │ ├── css-to-obj.ts
│ │ └── index.ts
│ ├── package.json
│ └── README.md
├── react-svg-loader
│ ├── tsconfig.json
│ ├── src
│ │ └── loader.ts
│ ├── package.json
│ └── README.md
├── react-svg-loader-cli
│ ├── tsconfig.json
│ ├── package.json
│ ├── README.md
│ └── src
│ │ └── cli.ts
├── rollup-plugin-react-svg
│ ├── tsconfig.json
│ ├── src
│ │ └── index.ts
│ ├── README.md
│ └── package.json
├── tsconfig.json
├── babel-core.d.ts
├── tsconfig.settings.json
└── svgo.d.ts
├── tsconfig.json
├── .eslintignore
├── .github
├── FUNDING.yml
└── workflows
│ └── lint-test.yml
├── .gitignore
├── lerna.json
├── tests
├── resources
│ ├── dummy.svg
│ ├── config.yaml
│ ├── config.json
│ ├── config.js
│ └── dummy2.svg
├── css-to-obj.ts
├── svgo.ts
├── cli.ts
└── loader.ts
├── .eslintrc
├── LICENSE
├── .travis.yml
├── README.md
├── package.json
└── CHANGELOG.md
/example/.gitignore:
--------------------------------------------------------------------------------
1 | public
2 |
--------------------------------------------------------------------------------
/packages/react-svg-core/README.md:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/packages/lodash.isplainobject.d.ts:
--------------------------------------------------------------------------------
1 | declare module "lodash.isplainobject";
2 |
--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "./packages/tsconfig.settings.json"
3 | }
4 |
--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | *.svg.react.js
3 | coverage
4 | flow-typed
5 | node_modules
6 | example/public/
7 |
--------------------------------------------------------------------------------
/.github/FUNDING.yml:
--------------------------------------------------------------------------------
1 | # You can add one username per supported platform and one custom link
2 | patreon: boopathi
3 | open_collective: boopathi
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | npm-debug.log
3 | lib
4 | *.svg.react.js
5 | coverage
6 | .vscode
7 | .nyc_output
8 | *.log
9 | *.tsbuildinfo
10 |
--------------------------------------------------------------------------------
/lerna.json:
--------------------------------------------------------------------------------
1 | {
2 | "packages": [
3 | "packages/*"
4 | ],
5 | "useWorkspaces": true,
6 | "npmClient": "yarn",
7 | "version": "3.0.3"
8 | }
9 |
--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | "react",
4 | [
5 | "es2015",
6 | {
7 | "modules": false
8 | }
9 | ]
10 | ]
11 | }
12 |
--------------------------------------------------------------------------------
/packages/babel-plugin-react-svg/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.settings.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | }
7 | }
8 |
--------------------------------------------------------------------------------
/packages/react-svg-loader/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.settings.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../react-svg-core" }]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-svg-core/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.settings.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../babel-plugin-react-svg" }]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/react-svg-loader-cli/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.settings.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../react-svg-loader" }]
8 | }
9 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-react-svg/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "../tsconfig.settings.json",
3 | "compilerOptions": {
4 | "outDir": "lib",
5 | "rootDir": "src"
6 | },
7 | "references": [{ "path": "../react-svg-core" }]
8 | }
9 |
--------------------------------------------------------------------------------
/tests/resources/dummy.svg:
--------------------------------------------------------------------------------
1 |
4 |
--------------------------------------------------------------------------------
/packages/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "files": [],
3 | "references": [
4 | { "path": "babel-plugin-react-svg" },
5 | { "path": "react-svg-core" },
6 | { "path": "react-svg-loader" },
7 | { "path": "react-svg-loader-cli" },
8 | { "path": "rollup-plugin-react-svg" }
9 | ]
10 | }
11 |
--------------------------------------------------------------------------------
/packages/babel-plugin-react-svg/src/camelize.ts:
--------------------------------------------------------------------------------
1 | export function hyphenToCamel(name: string) {
2 | return name.replace(/-([a-z])/g, g => g[1].toUpperCase());
3 | }
4 |
5 | export function namespaceToCamel(namespace: string, name: string) {
6 | return namespace + name.charAt(0).toUpperCase() + name.slice(1);
7 | }
8 |
--------------------------------------------------------------------------------
/packages/babel-core.d.ts:
--------------------------------------------------------------------------------
1 | declare module "@babel/core" {
2 | interface BabelCore {
3 | types: BabelTypes;
4 | }
5 |
6 | interface BabelTypes {
7 | [method: string]: (...args: any[]) => any;
8 | }
9 |
10 | export function transformSync(...args: any[]): any;
11 |
12 | export default BabelCore;
13 | }
14 |
--------------------------------------------------------------------------------
/tests/resources/config.yaml:
--------------------------------------------------------------------------------
1 | multipass: true
2 |
3 | plugins:
4 | - removeDoctype
5 | - removeXMLProcInst
6 | - removeComments
7 | - removeMetadata
8 | - removeEditorsNSData
9 | - cleanupAttrs
10 | - minifyStyles
11 | - convertStyleToAttrs
12 | - cleanupIDs
13 | - removeRasterImages
14 |
15 | js2svg:
16 | pretty: true
17 |
--------------------------------------------------------------------------------
/tests/resources/config.json:
--------------------------------------------------------------------------------
1 | { "multipass": true,
2 | "plugins":
3 | [ "removeDoctype",
4 | "removeXMLProcInst",
5 | "removeComments",
6 | "removeMetadata",
7 | "removeEditorsNSData",
8 | "cleanupAttrs",
9 | "minifyStyles",
10 | "convertStyleToAttrs",
11 | "cleanupIDs",
12 | "removeRasterImages" ],
13 | "js2svg": { "pretty": true } }
14 |
--------------------------------------------------------------------------------
/tests/resources/config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | multipass: true,
3 | plugins: [
4 | "removeDoctype",
5 | "removeXMLProcInst",
6 | "removeComments",
7 | "removeMetadata",
8 | "removeEditorsNSData",
9 | "cleanupAttrs",
10 | "minifyStyles",
11 | "convertStyleToAttrs",
12 | "cleanupIDs",
13 | "removeRasterImages"
14 | ],
15 | js2svg: { pretty: true }
16 | };
17 |
--------------------------------------------------------------------------------
/example/index.js:
--------------------------------------------------------------------------------
1 | /* global document */
2 | import React from "react";
3 | import ReactDOM from "react-dom";
4 | import Her from "./her.svg";
5 | import Pic from "./image.svg";
6 | import Dummy from "./dummy.svg";
7 |
8 | let Root = (
9 |
14 | );
15 |
16 | ReactDOM.render(Root, document.getElementById("test"));
17 |
--------------------------------------------------------------------------------
/packages/tsconfig.settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | // compulsory settings for TS Project references
4 | "composite": true,
5 | "declaration": true,
6 | "declarationMap": true,
7 | "sourceMap": true,
8 |
9 | // our settings
10 | "alwaysStrict": true,
11 | "esModuleInterop": true,
12 | "module": "commonjs",
13 | "target": "es2016",
14 | "downlevelIteration": true
15 | }
16 | }
17 |
--------------------------------------------------------------------------------
/packages/babel-plugin-react-svg/src/css-to-obj.ts:
--------------------------------------------------------------------------------
1 | export default function cssToObj(css: string): any {
2 | let o: any = {};
3 | if (typeof css !== "undefined") {
4 | let elements = css.split(";");
5 | elements
6 | .filter(el => !!el)
7 | .map(el => {
8 | let s = el.split(":"),
9 | key = s.shift().trim(),
10 | value = s.join(":").trim();
11 | o[key] = value;
12 | });
13 | }
14 | return o;
15 | }
16 |
--------------------------------------------------------------------------------
/example/dummy.svg:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/packages/react-svg-loader/src/loader.ts:
--------------------------------------------------------------------------------
1 | import loaderUtils from "loader-utils";
2 | import { optimize, transform } from "react-svg-core";
3 |
4 | export default function(content: string) {
5 | const loaderOpts = loaderUtils.getOptions(this) || {};
6 |
7 | const cb = this.async();
8 |
9 | Promise.resolve(String(content))
10 | .then(optimize(loaderOpts.svgo))
11 | .then(transform({ jsx: loaderOpts.jsx }))
12 | .then((result: any) => cb(null, result.code))
13 | .catch(err => cb(err));
14 | }
15 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "@typescript-eslint/parser",
3 | "parserOptions": {
4 | "project": "./packages/tsconfig.json",
5 | "sourceType": "module"
6 | },
7 | "plugins": ["react", "prettier", "@typescript-eslint"],
8 | "env": {
9 | "node": true,
10 | "es6": true
11 | },
12 | "settings": {
13 | "react": {
14 | "version": "detect"
15 | }
16 | },
17 | "rules": {
18 | "prettier/prettier": "error"
19 | },
20 | "extends": [
21 | "eslint:recommended",
22 | "plugin:react/recommended",
23 | "plugin:@typescript-eslint/eslint-recommended"
24 | ]
25 | }
26 |
--------------------------------------------------------------------------------
/example/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "example",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "index.js",
6 | "author": "boopathi",
7 | "scripts": {
8 | "build": "webpack --config webpack.config.js",
9 | "watch": "webpack --config webpack.config.js --watch"
10 | },
11 | "dependencies": {
12 | "babel-core": "^6.26.0",
13 | "babel-loader": "^7.1.2",
14 | "react": "^16.0.0",
15 | "react-dom": "^16.0.0",
16 | "rollup": "^0.50.0",
17 | "rollup-plugin-babel": "^3.0.2",
18 | "rollup-plugin-commonjs": "^8.2.1",
19 | "rollup-plugin-node-resolve": "^3.0.0",
20 | "rollup-plugin-replace": "^2.0.0",
21 | "webpack": "3.6.0"
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/example/webpack.config.js:
--------------------------------------------------------------------------------
1 | const reactSvgLoader = require.resolve("../packages/react-svg-loader");
2 | const path = require("path");
3 |
4 | module.exports = {
5 | entry: "./index.js",
6 | output: {
7 | path: path.join(__dirname, "public"),
8 | filename: "bundle.js"
9 | },
10 | module: {
11 | rules: [
12 | {
13 | test: /\.svg$/,
14 | exclude: /node_modules/,
15 | use: [
16 | "babel-loader",
17 | {
18 | loader: reactSvgLoader, // 'react-svg'
19 | query: {
20 | svgo: {
21 | pretty: true,
22 | plugins: [{ removeStyleElement: true }]
23 | }
24 | }
25 | }
26 | ]
27 | },
28 | {
29 | test: /\.js$/,
30 | loader: "babel-loader",
31 | exclude: /node_modules/
32 | }
33 | ]
34 | }
35 | };
36 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-react-svg/src/index.ts:
--------------------------------------------------------------------------------
1 | import * as fs from "fs";
2 | import * as path from "path";
3 | import { transform, optimize } from "react-svg-core";
4 | import { createFilter } from "rollup-pluginutils";
5 |
6 | type PluginOpts = {
7 | include?: any;
8 | exclude?: any;
9 | svgo?: any;
10 | jsx?: boolean;
11 | };
12 |
13 | export default function reactSvgLoadPlugin(options: PluginOpts = {}): any {
14 | const filter = createFilter(options.include, options.exclude);
15 |
16 | return {
17 | name: "react-svg",
18 | load(id: string) {
19 | if (!filter(id) || path.extname(id) !== ".svg") return;
20 |
21 | const contents = fs.readFileSync(id);
22 |
23 | return Promise.resolve(String(contents))
24 | .then(optimize(options.svgo))
25 | .then(transform({ jsx: options.jsx }))
26 | .then((result: any) => result.code);
27 | }
28 | };
29 | }
30 |
--------------------------------------------------------------------------------
/packages/react-svg-loader/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-svg-loader",
3 | "version": "3.0.3",
4 | "description": "Optimize svg and load it as a React Component",
5 | "keywords": [
6 | "loader",
7 | "react",
8 | "react-svg-loader",
9 | "webpack",
10 | "webpack-loader"
11 | ],
12 | "homepage": "https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loader",
13 | "bugs": {
14 | "url": "https://github.com/boopathi/react-svg-loader/issues"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/boopathi/react-svg-loader.git"
19 | },
20 | "license": "MIT",
21 | "author": "boopathi",
22 | "files": [
23 | "lib",
24 | "README.md"
25 | ],
26 | "main": "lib/loader.js",
27 | "dependencies": {
28 | "loader-utils": "^1.2.3",
29 | "react-svg-core": "^3.0.3"
30 | },
31 | "engines": {
32 | "node": ">=8"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-react-svg/README.md:
--------------------------------------------------------------------------------
1 | # rollup-plugin-react-svg
2 |
3 | Load SVG images as React Components
4 |
5 | ## Install
6 |
7 | ```sh
8 | npm i rollup-plugin-react-svg --save-dev
9 |
10 | # or with yarn
11 |
12 | yarn add rollup-plugin-react-svg --dev
13 | ```
14 |
15 | ## Usage
16 |
17 | ```js
18 | // rollup.config.js
19 | import reactSvg from "rollup-plugin-react-svg";
20 |
21 | export default {
22 | ...opts,
23 | plugins: [
24 | ...plugins,
25 |
26 | reactSvg({
27 | // svgo options
28 | svgo: {
29 | plugins: [], // passed to svgo
30 | multipass: true
31 | },
32 |
33 | // whether to output jsx
34 | jsx: false,
35 |
36 | // include: string
37 | include: null,
38 |
39 | // exclude: string
40 | exclude: null
41 | })
42 | ]
43 | }
44 | ```
45 |
46 | ## LICENSE
47 |
48 | [MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)
49 |
--------------------------------------------------------------------------------
/tests/css-to-obj.ts:
--------------------------------------------------------------------------------
1 | import test from "tape";
2 | import cssToObj from "../packages/babel-plugin-react-svg/src/css-to-obj";
3 |
4 | test("no entry check", function(t) {
5 | let css = "";
6 | let o = cssToObj(css);
7 | t.equal(Object.keys(o).length, 0);
8 | t.end();
9 | });
10 |
11 | test("single entry check", function(t) {
12 | let css = "text-align: center";
13 | let o = cssToObj(css);
14 | t.equal(o["text-align"], "center");
15 | t.equal(Object.keys(o).length, 1);
16 | t.end();
17 | });
18 |
19 | test("multiple entries check", function(t) {
20 | let url = "https://example.com/image.svg";
21 | let css = `width: 50px; height: 50px; text-align: center; background:url(${url})`;
22 | let o = cssToObj(css);
23 | t.equal(Object.keys(o).length, 4);
24 | t.equal(o.width, "50px");
25 | t.equal(o.height, "50px");
26 | t.equal(o["text-align"], "center");
27 | t.equal(o.background, `url(${url})`);
28 | t.end();
29 | });
30 |
--------------------------------------------------------------------------------
/example/rollup.config.js:
--------------------------------------------------------------------------------
1 | import babel from "rollup-plugin-babel";
2 | import nodeResolve from "rollup-plugin-node-resolve";
3 | import cjs from "rollup-plugin-commonjs";
4 | import replace from "rollup-plugin-replace";
5 |
6 | import reactSvg from "rollup-plugin-react-svg";
7 |
8 | export default {
9 | input: "index.js",
10 | output: {
11 | format: "iife",
12 | file: "public/bundle.js"
13 | },
14 | plugins: [
15 | babel({
16 | exclude: "node_modules/**"
17 | }),
18 | nodeResolve(),
19 | cjs(),
20 | replace({
21 | "process.env.NODE_ENV": JSON.stringify("production")
22 | }),
23 |
24 | // USAGE:
25 | reactSvg({
26 | // svgo options
27 | svgo: {
28 | plugins: [], // passed to svgo
29 | multipass: true
30 | },
31 |
32 | // whether to output jsx
33 | jsx: false,
34 |
35 | include: null,
36 |
37 | exclude: null
38 | })
39 | ]
40 | };
41 |
--------------------------------------------------------------------------------
/packages/rollup-plugin-react-svg/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "rollup-plugin-react-svg",
3 | "version": "3.0.3",
4 | "description": "Optimize svg and load it as a React Component",
5 | "keywords": [
6 | "loader",
7 | "react",
8 | "react-svg-loader",
9 | "rollup",
10 | "rollup-plugin"
11 | ],
12 | "homepage": "https://github.com/boopathi/react-svg-loader/tree/master/packages/rollup-plugin-react-svg",
13 | "bugs": {
14 | "url": "https://github.com/boopathi/react-svg-loader/issues"
15 | },
16 | "repository": {
17 | "type": "git",
18 | "url": "git+https://github.com/boopathi/react-svg-loader.git"
19 | },
20 | "license": "MIT",
21 | "author": "boopathi",
22 | "files": [
23 | "lib",
24 | "README.md"
25 | ],
26 | "main": "lib/index.js",
27 | "dependencies": {
28 | "react-svg-core": "^3.0.3",
29 | "rollup-pluginutils": "^2.8.1"
30 | },
31 | "engines": {
32 | "node": ">=8"
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/.github/workflows/lint-test.yml:
--------------------------------------------------------------------------------
1 | name: react-svg-loader
2 |
3 | on: [push]
4 |
5 | jobs:
6 | lint:
7 | name: Lint
8 | runs-on: ubuntu-latest
9 | steps:
10 | - uses: actions/checkout@v1
11 | - name: Setup Node 12 for Lint
12 | uses: actions/setup-node@v1
13 | with:
14 | node-version: 12
15 | - name: Lint
16 | run: |
17 | yarn
18 | yarn lint
19 | env:
20 | CI: true
21 | build:
22 | name: Build
23 | runs-on: ubuntu-latest
24 | strategy:
25 | matrix:
26 | node-version: [8.x, 10.x, 12.x]
27 | steps:
28 | - uses: actions/checkout@v1
29 | - name: Use Node.js ${{ matrix.node-version }}
30 | uses: actions/setup-node@v1
31 | with:
32 | node-version: ${{ matrix.node-version }}
33 | - name: npm install, build, and test
34 | run: |
35 | yarn
36 | yarn build
37 | yarn test
38 | env:
39 | CI: true
40 |
--------------------------------------------------------------------------------
/packages/react-svg-core/src/index.ts:
--------------------------------------------------------------------------------
1 | import Svgo from "svgo";
2 | import { transformSync as babelTransform } from "@babel/core";
3 | import plugin from "babel-plugin-react-svg";
4 |
5 | import { validateAndFix } from "./svgo";
6 |
7 | // SVGO Optimize
8 | export function optimize(opts: any = {}): (content: string) => Promise {
9 | opts = validateAndFix(opts);
10 | const svgo = new Svgo(opts);
11 |
12 | return (content: string) => svgo.optimize(content).then(data => data.data);
13 | }
14 |
15 | // Babel Transform
16 | export function transform({ jsx = false }: { jsx?: boolean } = {}): (
17 | content: string
18 | ) => string {
19 | return content =>
20 | babelTransform(content, {
21 | babelrc: false,
22 | configFile: false,
23 | presets: [jsx ? void 0 : require.resolve("@babel/preset-react")].filter(
24 | Boolean
25 | ),
26 | plugins: [require.resolve("@babel/plugin-syntax-jsx"), plugin]
27 | });
28 | }
29 |
--------------------------------------------------------------------------------
/packages/babel-plugin-react-svg/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "babel-plugin-react-svg",
3 | "version": "3.0.3",
4 | "description": "Babel plugin to transform svg to react component",
5 | "keywords": [
6 | "babel",
7 | "babel-plugin",
8 | "react",
9 | "react-svg-loader",
10 | "svg",
11 | "webpack",
12 | "webpack-loader"
13 | ],
14 | "homepage": "https://github.com/boopathi/react-svg-loader/tree/master/packages/babel-plugin-react-svg",
15 | "bugs": {
16 | "url": "https://github.com/boopathi/react-svg-loader/issues"
17 | },
18 | "repository": {
19 | "type": "git",
20 | "url": "git+https://github.com/boopathi/react-svg-loader.git"
21 | },
22 | "license": "MIT",
23 | "author": "boopathi",
24 | "files": [
25 | "lib",
26 | "README.md"
27 | ],
28 | "main": "lib/index.js",
29 | "peerDependencies": {
30 | "@babel/plugin-syntax-jsx": "^7.2.0"
31 | },
32 | "engines": {
33 | "node": ">=8"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/tests/svgo.ts:
--------------------------------------------------------------------------------
1 | import { validateAndFix } from "../packages/react-svg-core/src/svgo";
2 | import test from "tape";
3 |
4 | test("fills essential plugins and default plugins when empty", function(t) {
5 | let opts: any = {};
6 | opts = validateAndFix(opts);
7 | t.equal(opts.plugins.length, 4);
8 | t.end();
9 | });
10 |
11 | test("enable disabled essential plugins", function(t) {
12 | let opts: any = {
13 | full: true,
14 | plugins: ["removeDoctype", { removeComments: false }]
15 | };
16 | opts = validateAndFix(opts);
17 | t.equal(opts.plugins.length, 4);
18 | t.equal(opts.plugins[1].removeComments, true);
19 | t.end();
20 | });
21 |
22 | test("default plugins are set by default", t => {
23 | let opts: any = {};
24 | opts = validateAndFix(opts);
25 | t.assert(
26 | opts.plugins.find(
27 | p =>
28 | Object.prototype.hasOwnProperty.call(p, "removeViewBox") &&
29 | p.removeViewBox === false
30 | )
31 | );
32 | t.end();
33 | });
34 |
--------------------------------------------------------------------------------
/packages/react-svg-loader-cli/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-svg-loader-cli",
3 | "version": "3.0.3",
4 | "description": "react-svg-loader cli",
5 | "keywords": [
6 | "cli",
7 | "commandline",
8 | "react",
9 | "react-svg-loader"
10 | ],
11 | "homepage": "https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-loader-cli",
12 | "bugs": {
13 | "url": "https://github.com/boopathi/react-svg-loader/issues"
14 | },
15 | "repository": {
16 | "type": "git",
17 | "url": "git+https://github.com/boopathi/react-svg-loader.git"
18 | },
19 | "license": "MIT",
20 | "author": "boopathi",
21 | "files": [
22 | "bin",
23 | "lib",
24 | "README.md"
25 | ],
26 | "main": "lib/loader.js",
27 | "bin": {
28 | "svg2react": "./lib/cli.js"
29 | },
30 | "dependencies": {
31 | "lodash.isplainobject": "^4.0.6",
32 | "react-svg-loader": "^3.0.3",
33 | "yargs": "^13.2.4"
34 | },
35 | "engines": {
36 | "node": ">=8"
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/react-svg-core/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-svg-core",
3 | "version": "3.0.3",
4 | "description": "Core for react-svg-loader",
5 | "keywords": [
6 | "react-svg-loader"
7 | ],
8 | "homepage": "https://github.com/boopathi/react-svg-loader/tree/master/packages/react-svg-core",
9 | "bugs": {
10 | "url": "https://github.com/boopathi/react-svg-loader/issues"
11 | },
12 | "repository": {
13 | "type": "git",
14 | "url": "git+https://github.com/boopathi/react-svg-loader.git"
15 | },
16 | "license": "MIT",
17 | "author": "boopathi",
18 | "files": [
19 | "lib",
20 | "README.md"
21 | ],
22 | "main": "lib/index.js",
23 | "dependencies": {
24 | "@babel/core": "^7.5.4",
25 | "@babel/plugin-syntax-jsx": "^7.2.0",
26 | "@babel/preset-react": "^7.0.0",
27 | "babel-plugin-react-svg": "^3.0.3",
28 | "lodash.clonedeep": "^4.5.0",
29 | "lodash.isplainobject": "^4.0.6",
30 | "svgo": "^1.3.2"
31 | },
32 | "engines": {
33 | "node": ">=8"
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015-present, Boopathi Rajaa
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 all
13 | 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 THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/packages/react-svg-loader-cli/README.md:
--------------------------------------------------------------------------------
1 | # react-svg-loader-cli
2 |
3 | Provides CLI: `svg2react`
4 |
5 | CLI of [react-svg-loader](/packages/react-svg-loader)
6 |
7 | ## Install
8 |
9 | ```sh
10 | npm i react-svg-loader-cli --save-dev
11 |
12 | # or with yarn
13 |
14 | yarn add react-svg-loader-cli --dev
15 | ```
16 |
17 | Install it globally,
18 |
19 | ```sh
20 | npm i -g react-svg-loader-cli
21 |
22 | # or with yarn
23 |
24 | yarn global add react-svg-loader-cli
25 | ```
26 |
27 | ## Usage (svg2react)
28 |
29 | Use this CLI to convert svg files to react components. This is helpful when you'd want to customize your svg component by hand.
30 |
31 | ```sh
32 | `npm bin`/svg2react file1.svg file2.svg
33 | ```
34 |
35 | and the following files will be emitted
36 |
37 | + `file1.svg.react.js`
38 | + `file2.svg.react.js`
39 |
40 | in the **SAME directory** as the files
41 |
42 | ## CLI Options
43 |
44 | + `--jsx`: Outputs JSX code instead of compiling it to JavaScript using babel-preset-react
45 | + `--stdout`: Outputs to STDOUT
46 | + `--svgo `: Supports SVGO Config YAML / JSON / JS
47 | + `--svgo.plugins <...plugins>`: Takes in an array of plugins that need to be enabled
48 | + `--svgo.plugins. `: - Enable/Disable the plugin
49 | + `--svgo.floatPrecision $N`: Set floatPrecision to `N` for SVGO. SVGO supports 1-8.
50 |
51 | ```
52 | `npm bin`/svg2react file1.svg --jsx --stdout
53 | ```
54 |
55 | ## LICENSE
56 |
57 | [MIT](https://github.com/boopathi/react-svg-loader/blob/master/LICENSE)
58 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | sudo: false
2 | language: node_js
3 | cache: yarn
4 |
5 | stages:
6 | - lint
7 | - test
8 | - name: publish
9 | if: (branch = master) AND (repo = boopathi/react-svg-loader)
10 |
11 | jobs:
12 | include:
13 | - stage: lint
14 | node_js: "12"
15 | script: yarn lint
16 | - stage: publish
17 | node_js: "12"
18 | script: 'echo "//registry.npmjs.org/:_authToken=${NPM_TOKEN}" > ~/.npmrc'
19 | deploy:
20 | provider: script
21 | script: npm run publish-master
22 | skip_cleanup: true
23 | api_key: $NPM_TOKEN
24 |
25 | env:
26 | global:
27 | - CC_TEST_REPORTER_ID=9f4bef923b520da4cbdb209f004a8db49b215fc0f443efd2a1698585e65c21cb
28 |
29 | node_js:
30 | - "12"
31 | - "10"
32 | - "8"
33 |
34 | before_install:
35 | - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.16.0
36 | - export PATH=$HOME/.yarn/bin:$PATH
37 | - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
38 | - chmod +x ./cc-test-reporter
39 |
40 | before_script:
41 | - yarn clean
42 | - yarn build
43 | - "./cc-test-reporter before-build"
44 |
45 | script:
46 | - yarn cover
47 |
48 | after_script:
49 | - "./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT"
50 |
51 | addons:
52 | code_climate:
53 | repo_token:
54 | secure: hU3p2PlR6A4ZdTDzkYsKpXbuFsgdgSTDBW+b+SSs7ePpz1hbY86oYCP6SLNB87qMwM97oFae21/mGGQhrwc6lQiDNNYLM5C4twypjHk1sbXfyCtIOvJI9EjlxqOtPy1/FJ7jzeCSm9zts/r7IhNrEJpvA8Usg8hX9agI1W2Wy006sKplmhE7WNIhr9iikkhMVlIftWy4/nWDDQ66DiRh526VMi5ruv8jp22zeH3Nj6DrE3pCfj6+NXbNLYuP7KqGRDN9WWUrVOSHGwa215SOP9GYocNXoqhdgbWiestMpyj3GLOfHAqitw7Sdem9+yyPf1x9cMfuSYLddjIGEhLo6AE5KjjI86njycX2/di8ykMNXyevZEuKN3W7rcuVW817FC7ehEpjPphPHTsuku8nwtJlGSgCbNWffq+k+kc421Nm92TAWkdIBtqaG2dX6pBE420BaMNlT7FxqEDznzWuKbFh+Hcdx7RHbfJbWfAJEvztGEN6jKLjSq+T58d6Q6PSs1pjUxe/wPrw9oksem6lKGNxzlbV2/89WSfU5p57NBOlIuTr3Tt5//PlHeStgeVNWF/zkJQzqk8DnE38fD+EALX7sU8kirO2gtD71F7ZzuDZ06agPQoM7hgtDBaKt/GC4OZsxVli8MZlG80yPXaIe8E3tpxYSG7Uw4bPQSGM3xc=
55 |
--------------------------------------------------------------------------------
/packages/react-svg-loader/README.md:
--------------------------------------------------------------------------------
1 | # react-svg-loader
2 |
3 | ## Install
4 |
5 | ```sh
6 | npm i react-svg-loader --save-dev
7 | ```
8 |
9 | or
10 |
11 | ```sh
12 | yarn add react-svg-loader --dev
13 | ```
14 |
15 | ## Usage
16 |
17 | ```js
18 | // without webpack loader config
19 | import Image1 from 'react-svg-loader!./image1.svg';
20 |
21 | // or if you're passing all .svg files via react-svg-loader,
22 | import Image2 from './image1.svg';
23 |
24 | // and use it like any other React Component
25 |
26 |
27 | ```
28 |
29 | ### Loader output
30 |
31 | By default the loader outputs ES2015 code (with JSX compiled to JavaScript using babel-preset-react). You can combine it with [babel-loader](https://github.com/babel/babel-loader) + [babel-preset-env](https://github.com/babel/babel-preset-env) to compile it down to your target.
32 |
33 | ```js
34 | // In your webpack config
35 | {
36 | test: /\.svg$/,
37 | use: [
38 | {
39 | loader: "babel-loader"
40 | },
41 | {
42 | loader: "react-svg-loader",
43 | options: {
44 | jsx: true // true outputs JSX tags
45 | }
46 | }
47 | ]
48 | }
49 | ```
50 |
51 | ### SVGO options
52 |
53 | ```js
54 | {
55 | test: /\.svg$/,
56 | use: [
57 | "babel-loader",
58 | {
59 | loader: "react-svg-loader",
60 | options: {
61 | svgo: {
62 | plugins: [
63 | { removeTitle: false }
64 | ],
65 | floatPrecision: 2
66 | }
67 | }
68 | }
69 | ]
70 | }
71 | ```
72 |
73 | ## Internals
74 |
75 |
76 | Input SVG
77 |
78 | ↓
79 |
80 | SVG Optimize using SVGO
81 |
82 | ↓
83 |
84 | Babel Transform with preset=react and plugin=svgToComponent
85 |
86 |
87 | ## Assumptions and Other gotchas
88 |
89 | + Root element is always `