Skip to content

Commit 06c338d

Browse files
gregbergegregberge
committed
feat(svgo): prefix ids by default
Closes #210
1 parent ac8b8ca commit 06c338d

8 files changed

Lines changed: 222 additions & 200 deletions

File tree

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,12 +26,12 @@
2626
"babel-loader": "^8.0.4",
2727
"codecov": "^3.1.0",
2828
"conventional-github-releaser": "^3.1.2",
29-
"eslint": "^5.7.0",
29+
"eslint": "^5.8.0",
3030
"eslint-config-airbnb-base": "^13.1.0",
3131
"eslint-config-prettier": "^3.1.0",
3232
"eslint-plugin-import": "^2.14.0",
3333
"jest": "^23.6.0",
3434
"lerna": "^3.4.3",
35-
"react": "^16.5.2"
35+
"react": "^16.6.0"
3636
}
3737
}

‎packages/core/src/__snapshots__/convert.test.js.snap‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -333,7 +333,7 @@ exports[`convert should convert style attribute 1`] = `
333333
const SvgComponent = props => (
334334
<svg width={48} height={48} {...props}>
335335
<g transform=\\"translate(0 -1004.362)\\">
336-
<g id=\\"a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
336+
<g id=\\"prefix__a\\" color=\\"#000\\" fill=\\"#a3a3a3\\" strokeWidth={8}>
337337
<rect
338338
style={{
339339
marker: 'none',
@@ -359,11 +359,11 @@ const SvgComponent = props => (
359359
overflow=\\"visible\\"
360360
/>
361361
</g>
362-
<use xlinkHref=\\"#a\\" />
363-
<use xlinkHref=\\"#a\\" transform=\\"translate(0 8)\\" />
364-
<use xlinkHref=\\"#a\\" transform=\\"translate(0 16)\\" />
365-
<use xlinkHref=\\"#a\\" transform=\\"translate(0 24)\\" />
366-
<use xlinkHref=\\"#a\\" transform=\\"translate(0 32)\\" />
362+
<use xlinkHref=\\"#prefix__a\\" />
363+
<use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 8)\\" />
364+
<use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 16)\\" />
365+
<use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 24)\\" />
366+
<use xlinkHref=\\"#prefix__a\\" transform=\\"translate(0 32)\\" />
367367
</g>
368368
</svg>
369369
)
@@ -392,15 +392,15 @@ const SvgComponent = props => (
392392
<svg width={88} height={88} {...props}>
393393
<style>{'path{fill:red}'}</style>
394394
<g
395-
id=\\"Blocks\\"
395+
id=\\"prefix__Blocks\\"
396396
stroke=\\"none\\"
397397
strokeWidth={1}
398398
fill=\\"none\\"
399399
fillRule=\\"evenodd\\"
400400
strokeLinecap=\\"square\\"
401401
>
402-
<g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
403-
<path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"Shape\\" />
402+
<g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
403+
<path d=\\"M51 37L37 51M51 51L37 37\\" id=\\"prefix__Shape\\" />
404404
</g>
405405
<style />
406406
</g>
@@ -435,8 +435,8 @@ exports[`convert should remove style tags 1`] = `
435435
const SvgComponent = props => (
436436
<svg width={88} height={88} {...props}>
437437
<g fill=\\"red\\" fillRule=\\"evenodd\\" strokeLinecap=\\"square\\">
438-
<g id=\\"Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
439-
<path d=\\"M51 37L37 51\\" id=\\"Shape\\" />
438+
<g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" strokeWidth={2}>
439+
<path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\" />
440440
<path d=\\"M51 51L37 37\\" />
441441
</g>
442442
<style />

‎packages/plugin-jsx/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"@svgr/babel-preset": "^3.1.0",
2323
"@svgr/hast-util-to-babel-ast": "^3.1.0",
2424
"rehype-parse": "^5.0.0",
25-
"unified": "^7.0.0",
26-
"vfile": "^3.0.0"
25+
"unified": "^7.0.1",
26+
"vfile": "^3.0.1"
2727
}
2828
}

‎packages/plugin-svgo/src/__snapshots__/index.test.js.snap‎

Lines changed: 8 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,15 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`svgo should not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<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>"`;
3+
exports[`svgo should be possible to disable id prefixing 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
44
5-
exports[`svgo should not remove viewBox with icon option 1`] = `
6-
"<?xml version=\\"1.0\\" encoding=\\"UTF-8\\"?>
7-
<svg width=\\"88px\\" height=\\"88px\\" viewBox=\\"0 0 88 88\\" version=\\"1.1\\" xmlns=\\"http://www.w3.org/2000/svg\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
8-
<!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
9-
<title>Dismiss</title>
10-
<desc>Created with Sketch.</desc>
11-
<defs></defs>
12-
<g id=\\"Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\">
13-
<g id=\\"Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\">
14-
<path d=\\"M51,37 L37,51\\" id=\\"Shape\\"></path>
15-
<path d=\\"M51,51 L37,37\\" id=\\"Shape\\"></path>
16-
</g>
17-
</g>
18-
</svg>"
19-
`;
5+
exports[`svgo should not load runtime configuration with \`runtimeConfig: false\` 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
206
21-
exports[`svgo should optimize svg 1`] = `"<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>"`;
7+
exports[`svgo should not remove viewBox with icon option 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
228
23-
exports[`svgo should support config.svgoConfig 1`] = `"<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>"`;
9+
exports[`svgo should optimize svg 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
2410
25-
exports[`svgo should support icon with config.svgoConfig svgos 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 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>"`;
11+
exports[`svgo should support config.svgoConfig 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
2612
27-
exports[`svgo should use state.filePath to detect configuration 1`] = `"<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>"`;
13+
exports[`svgo should support icon with config.svgoConfig plugins 1`] = `"<svg width=\\"88\\" height=\\"88\\" viewBox=\\"0 0 88 88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><desc>Created with Sketch.</desc><g id=\\"prefix__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"prefix__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"prefix__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;
14+
15+
exports[`svgo should use state.filePath to detect configuration 1`] = `"<svg width=\\"88\\" height=\\"88\\" xmlns=\\"http://www.w3.org/2000/svg\\"><g id=\\"svgo__Blocks\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\" stroke-linecap=\\"square\\"><g id=\\"svgo__Dismiss\\" stroke=\\"#063855\\" stroke-width=\\"2\\"><path d=\\"M51 37L37 51\\" id=\\"svgo__Shape\\"/><path d=\\"M51 51L37 37\\"/><style></style></g></g></svg>"`;

‎packages/plugin-svgo/src/index.js‎

Lines changed: 8 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,9 @@ function optimizeSync(svgstr, info) {
8484
}
8585

8686
function getBaseSvgoConfig(config) {
87-
const baseSvgoConfig = { plugins: [] }
87+
const baseSvgoConfig = {
88+
plugins: [{ prefixIds: true }],
89+
}
8890
if (config.icon) baseSvgoConfig.plugins.push({ removeViewBox: false })
8991
return baseSvgoConfig
9092
}
@@ -94,9 +96,12 @@ function getFilePath(state) {
9496
}
9597

9698
function createSvgo(config, rcConfig) {
97-
return new SVGO(
98-
mergeDeep(getBaseSvgoConfig(config), rcConfig, config.svgoConfig),
99+
const mergedConfig = mergeDeep(
100+
getBaseSvgoConfig(config),
101+
rcConfig,
102+
config.svgoConfig,
99103
)
104+
return new SVGO(mergedConfig)
100105
}
101106

102107
function getInfo(state) {

‎packages/plugin-svgo/src/index.test.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,9 @@ const baseSvg = `<?xml version="1.0" encoding="UTF-8"?>
1111
<g id="Dismiss" stroke="#063855" stroke-width="2">
1212
<path d="M51,37 L37,51" id="Shape"></path>
1313
<path d="M51,51 L37,37" id="Shape"></path>
14+
<style>
15+
#Shape {}
16+
</style>
1417
</g>
1518
</g>
1619
</svg>`
@@ -27,22 +30,22 @@ describe('svgo', () => {
2730
{
2831
svgo: true,
2932
runtimeConfig: true,
30-
svgoConfig: { svgos: [{ removeDesc: false }] },
33+
svgoConfig: { plugins: [{ removeDesc: false }] },
3134
},
3235
{},
3336
)
3437

3538
expect(result).toMatchSnapshot()
3639
})
3740

38-
it('should support icon with config.svgoConfig svgos', () => {
41+
it('should support icon with config.svgoConfig plugins', () => {
3942
const result = svgo(
4043
baseSvg,
4144
{
4245
svgo: true,
4346
icon: true,
4447
runtimeConfig: true,
45-
svgoConfig: { svgos: [{ removeDesc: false }] },
48+
svgoConfig: { plugins: [{ removeDesc: false }] },
4649
},
4750
{},
4851
)
@@ -73,7 +76,22 @@ describe('svgo', () => {
7376
it('should not remove viewBox with icon option', () => {
7477
const result = svgo(
7578
baseSvg,
76-
{ icon: true, runtimeConfig: true },
79+
{ svgo: true, icon: true, runtimeConfig: true },
80+
{ filePath: path.join(__dirname, '../__fixtures__/svgo') },
81+
)
82+
83+
expect(result).toMatchSnapshot()
84+
})
85+
86+
it('should be possible to disable id prefixing', () => {
87+
const result = svgo(
88+
baseSvg,
89+
{
90+
svgo: true,
91+
icon: true,
92+
runtimeConfig: true,
93+
svgoConfig: { plugins: [{ prefixIds: false }] },
94+
},
7795
{ filePath: path.join(__dirname, '../__fixtures__/svgo') },
7896
)
7997

‎packages/webpack/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,6 @@
3535
"babel-loader": "^8.0.4",
3636
"memory-fs": "^0.4.1",
3737
"url-loader": "^1.1.2",
38-
"webpack": "^4.20.2"
38+
"webpack": "^4.24.0"
3939
}
4040
}

0 commit comments

Comments
 (0)
⚡