Skip to content

Commit fd66885

Browse files
gregbergegregberge
committed
feat: upgrade svgo & prettier
BREAKING CHANGE: SVGO now removes viewBox automatically.
1 parent 7933c03 commit fd66885

8 files changed

Lines changed: 374 additions & 240 deletions

File tree

‎package.json‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,18 +16,18 @@
1616
"license": "MIT",
1717
"devDependencies": {
1818
"babel-cli": "^6.26.0",
19-
"babel-eslint": "^8.0.1",
19+
"babel-eslint": "^8.0.2",
2020
"babel-loader": "^7.1.2",
2121
"babel-plugin-transform-class-properties": "^6.24.1",
2222
"babel-plugin-transform-object-rest-spread": "^6.26.0",
2323
"babel-preset-env": "^1.6.0",
2424
"babel-preset-react": "^6.24.1",
25-
"codecov": "^2.3.0",
26-
"conventional-github-releaser": "^1.1.12",
25+
"codecov": "^3.0.0",
26+
"conventional-github-releaser": "^2.0.0",
2727
"conventional-recommended-bump": "^1.0.2",
2828
"eslint": "^4.8.0",
2929
"eslint-config-airbnb-base": "^12.0.1",
30-
"eslint-config-prettier": "^2.6.0",
30+
"eslint-config-prettier": "^2.7.0",
3131
"eslint-plugin-import": "^2.7.0",
3232
"jest": "^21.2.1",
3333
"mversion": "^1.10.1",
@@ -44,9 +44,9 @@
4444
"lodash": "^4.17.4",
4545
"mz": "^2.6.0",
4646
"output-file-sync": "^2.0.0",
47-
"prettier": "^1.7.3",
47+
"prettier": "^1.8.1",
4848
"recursive-readdir": "^2.2.1",
49-
"svgo": "^0.7.2"
49+
"svgo": "^1.0.2"
5050
},
5151
"bin": {
5252
"svgr": "./bin/svgr"

‎src/__snapshots__/index.test.js.snap‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ exports[`convert should convert using config 1`] = `
5050
"import React from \\"react\\";
5151
5252
const SvgComponent = props => (
53-
<svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
53+
<svg width={88} height={88} {...props}>
5454
<title>Dismiss</title>
5555
<g
5656
stroke=\\"#063855\\"
@@ -72,11 +72,12 @@ exports[`convert should remove style tags 1`] = `
7272
"import React from \\"react\\";
7373
7474
const SvgComponent = props => (
75-
<svg width={88} height={88} viewBox=\\"0 0 88 88\\" {...props}>
75+
<svg width={88} height={88} {...props}>
7676
<title>Dismiss</title>
77-
<g id=\\"Blocks\\" fill=\\"none\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
77+
<g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
7878
<g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
79-
<path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"Shape\\" />
79+
<path d=\\"M51 37L37 51\\" id=\\"Shape\\" />
80+
<path d=\\"M51 51L37 37\\" />
8081
</g>
8182
</g>
8283
</svg>

‎src/cli/__snapshots__/index.test.js.snap‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ exports[`cli --no-expand-props 1`] = `
1818
"import React from \\"react\\";
1919
2020
const One = () => (
21-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\">
21+
<svg width={48} height={1}>
2222
<title>Rectangle 5</title>
2323
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
2424
</svg>
@@ -32,7 +32,7 @@ export default One;
3232
exports[`cli --no-prettier 1`] = `
3333
"import React from 'react'
3434
35-
const One = (props) => <svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
35+
const One = (props) => <svg width={48} height={1} {...props}>
3636
<title>
3737
Rectangle 5
3838
</title>
@@ -48,7 +48,7 @@ exports[`cli --no-semi 1`] = `
4848
"import React from \\"react\\"
4949
5050
const One = props => (
51-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
51+
<svg width={48} height={1} {...props}>
5252
<title>Rectangle 5</title>
5353
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
5454
</svg>
@@ -103,7 +103,7 @@ exports[`cli --no-title 1`] = `
103103
"import React from \\"react\\";
104104
105105
const One = props => (
106-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
106+
<svg width={48} height={1} {...props}>
107107
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
108108
</svg>
109109
);
@@ -117,7 +117,7 @@ exports[`cli --precision 1`] = `
117117
"import React from \\"react\\";
118118
119119
const One = props => (
120-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
120+
<svg width={48} height={1} {...props}>
121121
<title>Rectangle 5</title>
122122
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
123123
</svg>
@@ -132,7 +132,7 @@ exports[`cli --replace-attr-value 1`] = `
132132
"import React from \\"react\\";
133133
134134
const One = props => (
135-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
135+
<svg width={48} height={1} {...props}>
136136
<title>Rectangle 5</title>
137137
<path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
138138
</svg>
@@ -148,7 +148,7 @@ exports[`cli --template 1`] = `
148148
149149
export default function One() {
150150
return (
151-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
151+
<svg width={48} height={1} {...props}>
152152
<title>Rectangle 5</title>
153153
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
154154
</svg>
@@ -162,7 +162,7 @@ exports[`cli should work with a simple file 1`] = `
162162
"import React from \\"react\\";
163163
164164
const One = props => (
165-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
165+
<svg width={48} height={1} {...props}>
166166
<title>Rectangle 5</title>
167167
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
168168
</svg>
@@ -177,7 +177,7 @@ exports[`cli should work with output directory 1`] = `
177177
"import React from \\"react\\";
178178
179179
const One = props => (
180-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
180+
<svg width={48} height={1} {...props}>
181181
<title>Rectangle 5</title>
182182
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
183183
</svg>
@@ -191,7 +191,7 @@ exports[`cli should work with output directory 2`] = `
191191
"import React from \\"react\\";
192192
193193
const Two = props => (
194-
<svg width={48} height={11} viewBox=\\"0 0 48 11\\" {...props}>
194+
<svg width={48} height={11} {...props}>
195195
<title>Group 6</title>
196196
<g stroke=\\"#063855\\" fill=\\"none\\" fillRule=\\"evenodd\\">
197197
<path d=\\"M0 7l5.317-2.658a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0l2.634 1.316a6 6 0 0 0 5.366 0l2.634-1.316a6 6 0 0 1 5.366 0L48 7\\" />
@@ -208,7 +208,7 @@ exports[`cli should work with stdin 1`] = `
208208
"import React from \\"react\\";
209209
210210
const SvgComponent = props => (
211-
<svg width={48} height={1} viewBox=\\"0 0 48 1\\" {...props}>
211+
<svg width={48} height={1} {...props}>
212212
<title>Rectangle 5</title>
213213
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
214214
</svg>

‎src/cli/dirCommand.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import outputFileSync from 'output-file-sync'
55
import { convertFile, isCompilableExtension, readdir } from './util'
66
import { pascalCase } from '../transforms/rename'
77

8-
export const rename = (relative) => {
8+
export const rename = relative => {
99
const relativePath = path.parse(relative)
1010
relativePath.ext = '.js'
1111
relativePath.name = pascalCase(relativePath.name)

‎src/configToOptions.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,8 @@ function configToOptions(config = {}) {
4343
const plugins = []
4444
const svgoConfig = { plugins }
4545
if (!config.title || config.icon) plugins.push({ removeTitle: {} })
46+
else if (config.title) plugins.push({ removeTitle: false })
47+
if (config.icon) plugins.push({ removeViewBox: false })
4648
if (config.precision === 'number')
4749
svgoConfig.floatPrecision = Number(svgoConfig.precision)
4850
return svgoConfig

‎src/plugins/svgo.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,6 @@ import SVGO from 'svgo'
22

33
export default async (code, opts) => {
44
const svgo = new SVGO(opts)
5-
6-
return new Promise((resolve, reject) => {
7-
svgo.optimize(code, result => {
8-
if (result.error) reject(result.error)
9-
else resolve(result.data)
10-
})
11-
})
5+
const { data } = await svgo.optimize(code)
6+
return data
127
}

‎src/plugins/svgo.test.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ describe('svgo', () => {
1717
</svg>`)
1818

1919
expect(result).toBe(
20-
'<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><title>Dismiss</title><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
20+
'<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
2121
)
2222
})
2323

@@ -40,7 +40,7 @@ describe('svgo', () => {
4040
)
4141

4242
expect(result).toBe(
43-
'<svg width="88" height="88" viewBox="0 0 88 88" xmlns="http://www.w3.org/2000/svg"><title>Dismiss</title><desc>Created with Sketch.</desc><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
43+
'<svg width="88" height="88" xmlns="http://www.w3.org/2000/svg"><desc>Created with Sketch.</desc><g stroke="#063855" stroke-width="2" fill="none" fill-rule="evenodd" stroke-linecap="square"><path d="M51 37L37 51M51 51L37 37"/></g></svg>',
4444
)
4545
})
4646
})

0 commit comments

Comments
 (0)
⚡