Skip to content

Commit f71aa7a

Browse files
gregbergegregberge
committed
feat: always prefix component name with "Svg"
Closes #190
1 parent 461492b commit f71aa7a

6 files changed

Lines changed: 67 additions & 64 deletions

File tree

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

Lines changed: 40 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
exports[`cli should not override config with cli defaults 1`] = `
44
"import React from 'react'
55
6-
const File = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">
6+
const SvgFile = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http://www.w3.org/1999/xlink\\">
77
<title>
88
Rectangle 5
99
</title>
@@ -27,64 +27,64 @@ const File = () => <svg viewBox=\\"0 0 48 1\\" version={1.1} xmlnsXlink=\\"http:
2727
</svg>
2828
2929
30-
export default File
30+
export default SvgFile
3131
"
3232
`;
3333

3434
exports[`cli should support --prettier-config as file 1`] = `
3535
"import React from 'react'
3636
37-
const File = props => (
37+
const SvgFile = props => (
3838
<svg width={48} height={1} {...props}>
3939
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
4040
</svg>
4141
)
4242
43-
export default File
43+
export default SvgFile
4444
4545
"
4646
`;
4747

4848
exports[`cli should support --prettier-config as json 1`] = `
4949
"import React from 'react'
5050
51-
const File = props => (
51+
const SvgFile = props => (
5252
<svg width={48} height={1} {...props}>
5353
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
5454
</svg>
5555
)
5656
57-
export default File
57+
export default SvgFile
5858
5959
"
6060
`;
6161

6262
exports[`cli should support --svgo-config as file 1`] = `
6363
"import React from 'react'
6464
65-
const File = props => (
65+
const SvgFile = props => (
6666
<svg width={48} height={1} {...props}>
6767
<title>Rectangle 5</title>
6868
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
6969
</svg>
7070
)
7171
72-
export default File
72+
export default SvgFile
7373
7474
"
7575
`;
7676

7777
exports[`cli should support --svgo-config as json 1`] = `
7878
"import React from 'react'
7979
80-
const File = props => (
80+
const SvgFile = props => (
8181
<svg width={48} height={1} {...props}>
8282
<title>Rectangle 5</title>
8383
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
8484
</svg>
8585
)
8686
87-
export default File
87+
export default SvgFile
8888
8989
"
9090
`;
@@ -134,117 +134,117 @@ Array [
134134
exports[`cli should support various args: --icon 1`] = `
135135
"import React from 'react'
136136
137-
const File = props => (
137+
const SvgFile = props => (
138138
<svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
139139
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
140140
</svg>
141141
)
142142
143-
export default File
143+
export default SvgFile
144144
145145
"
146146
`;
147147

148148
exports[`cli should support various args: --native --icon 1`] = `
149149
"import React from 'react'
150150
import Svg, { Path } from 'react-native-svg'
151-
const File = props => (
151+
const SvgFile = props => (
152152
<Svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
153153
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
154154
</Svg>
155155
)
156156
157-
export default File
157+
export default SvgFile
158158
159159
"
160160
`;
161161

162162
exports[`cli should support various args: --native --no-expand-props 1`] = `
163163
"import React from 'react'
164164
import Svg, { Path } from 'react-native-svg'
165-
const File = () => (
165+
const SvgFile = () => (
166166
<Svg width={48} height={1}>
167167
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
168168
</Svg>
169169
)
170170
171-
export default File
171+
export default SvgFile
172172
173173
"
174174
`;
175175

176176
exports[`cli should support various args: --native --ref 1`] = `
177177
"import React from 'react'
178178
import Svg, { Path } from 'react-native-svg'
179-
const File = ({ svgRef, ...props }) => (
179+
const SvgFile = ({ svgRef, ...props }) => (
180180
<Svg width={48} height={1} ref={svgRef} {...props}>
181181
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
182182
</Svg>
183183
)
184184
185-
export default File
185+
export default SvgFile
186186
187187
"
188188
`;
189189

190190
exports[`cli should support various args: --native 1`] = `
191191
"import React from 'react'
192192
import Svg, { Path } from 'react-native-svg'
193-
const File = props => (
193+
const SvgFile = props => (
194194
<Svg width={48} height={1} {...props}>
195195
<Path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
196196
</Svg>
197197
)
198198
199-
export default File
199+
export default SvgFile
200200
201201
"
202202
`;
203203

204204
exports[`cli should support various args: --no-dimensions 1`] = `
205205
"import React from 'react'
206206
207-
const File = props => (
207+
const SvgFile = props => (
208208
<svg {...props}>
209209
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
210210
</svg>
211211
)
212212
213-
export default File
213+
export default SvgFile
214214
215215
"
216216
`;
217217

218218
exports[`cli should support various args: --no-expand-props 1`] = `
219219
"import React from 'react'
220220
221-
const File = () => (
221+
const SvgFile = () => (
222222
<svg width={48} height={1}>
223223
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
224224
</svg>
225225
)
226226
227-
export default File
227+
export default SvgFile
228228
229229
"
230230
`;
231231

232232
exports[`cli should support various args: --no-prettier 1`] = `
233233
"import React from 'react'
234234
235-
const File = props => <svg width={48} height={1} {...props}>
235+
const SvgFile = props => <svg width={48} height={1} {...props}>
236236
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
237237
</svg>
238238
239239
240-
export default File
240+
export default SvgFile
241241
"
242242
`;
243243

244244
exports[`cli should support various args: --no-svgo 1`] = `
245245
"import React from 'react'
246246
247-
const File = props => (
247+
const SvgFile = props => (
248248
<svg
249249
width=\\"48px\\"
250250
height=\\"1px\\"
@@ -276,92 +276,92 @@ const File = props => (
276276
</svg>
277277
)
278278
279-
export default File
279+
export default SvgFile
280280
281281
"
282282
`;
283283

284284
exports[`cli should support various args: --ref 1`] = `
285285
"import React from 'react'
286286
287-
const File = ({ svgRef, ...props }) => (
287+
const SvgFile = ({ svgRef, ...props }) => (
288288
<svg width={48} height={1} ref={svgRef} {...props}>
289289
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
290290
</svg>
291291
)
292292
293-
export default File
293+
export default SvgFile
294294
295295
"
296296
`;
297297

298298
exports[`cli should support various args: --replace-attr-values "#063855=currentColor" 1`] = `
299299
"import React from 'react'
300300
301-
const File = props => (
301+
const SvgFile = props => (
302302
<svg width={48} height={1} {...props}>
303303
<path d=\\"M0 0h48v1H0z\\" fill=\\"currentColor\\" fillRule=\\"evenodd\\" />
304304
</svg>
305305
)
306306
307-
export default File
307+
export default SvgFile
308308
309309
"
310310
`;
311311

312312
exports[`cli should support various args: --svg-attributes "focusable=false" 1`] = `
313313
"import React from 'react'
314314
315-
const File = props => (
315+
const SvgFile = props => (
316316
<svg focusable=\\"false\\" width={48} height={1} {...props}>
317317
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
318318
</svg>
319319
)
320320
321-
export default File
321+
export default SvgFile
322322
323323
"
324324
`;
325325

326326
exports[`cli should support various args: --svg-props "hidden={true}" 1`] = `
327327
"import React from 'react'
328328
329-
const File = props => (
329+
const SvgFile = props => (
330330
<svg hidden={true} width={48} height={1} {...props}>
331331
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
332332
</svg>
333333
)
334334
335-
export default File
335+
export default SvgFile
336336
337337
"
338338
`;
339339

340340
exports[`cli should support various args: --title-prop 1`] = `
341341
"import React from 'react'
342342
343-
const File = ({ title, ...props }) => (
343+
const SvgFile = ({ title, ...props }) => (
344344
<svg width={48} height={1} {...props}>
345345
<title>{title}</title>
346346
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
347347
</svg>
348348
)
349349
350-
export default File
350+
export default SvgFile
351351
352352
"
353353
`;
354354

355355
exports[`cli should work with a simple file 1`] = `
356356
"import React from 'react'
357357
358-
const File = props => (
358+
const SvgFile = props => (
359359
<svg width={48} height={1} {...props}>
360360
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
361361
</svg>
362362
)
363363
364-
export default File
364+
export default SvgFile
365365
366366
"
367367
`;

‎packages/cli/src/__snapshots__/util.test.js.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,25 +3,25 @@
33
exports[`util #convertFile should convert a file 1`] = `
44
"import React from 'react'
55
6-
const File = props => (
6+
const SvgFile = props => (
77
<svg width={48} height={1} {...props}>
88
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
99
</svg>
1010
)
1111
12-
export default File
12+
export default SvgFile
1313
"
1414
`;
1515

1616
exports[`util #convertFile should support a custom config path 1`] = `
1717
"import React from 'react'
1818
19-
const File = props => (
19+
const SvgFile = props => (
2020
<svg viewBox=\\"0 0 48 1\\" width=\\"1em\\" height=\\"1em\\" {...props}>
2121
<path d=\\"M0 0h48v1H0z\\" fill=\\"#063855\\" fillRule=\\"evenodd\\" />
2222
</svg>
2323
)
2424
25-
export default File
25+
export default SvgFile
2626
"
2727
`;

‎packages/core/src/util.js‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,10 @@ import camelcase from 'camelcase'
33

44
export function getComponentName(state) {
55
if (!state.filePath) return 'SvgComponent'
6-
const componentName = camelcase(path.parse(state.filePath).name, {
6+
const pascalCaseFileName = camelcase(path.parse(state.filePath).name, {
77
pascalCase: true,
88
})
9-
if (Number.isNaN(parseInt(componentName[0], 10))) return componentName
10-
return `Svg${componentName}`
9+
return `Svg${pascalCaseFileName}`
1110
}
1211

1312
export function expandState(state) {

‎packages/core/src/util.test.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,13 @@ describe('util', () => {
44
describe('#getComponentName', () => {
55
it('should transform filePath into a component name', () => {
66
expect(getComponentName({})).toBe('SvgComponent')
7-
expect(getComponentName({ filePath: 'hello.svg' })).toBe('Hello')
8-
expect(getComponentName({ filePath: 'hello-you.svg' })).toBe('HelloYou')
9-
expect(getComponentName({ filePath: 'hello_you.svg' })).toBe('HelloYou')
7+
expect(getComponentName({ filePath: 'hello.svg' })).toBe('SvgHello')
8+
expect(getComponentName({ filePath: 'hello-you.svg' })).toBe(
9+
'SvgHelloYou',
10+
)
11+
expect(getComponentName({ filePath: 'hello_you.svg' })).toBe(
12+
'SvgHelloYou',
13+
)
1014
expect(getComponentName({ filePath: '1_big_svg.svg' })).toBe('Svg1BigSvg')
1115
})
1216
})

0 commit comments

Comments
 (0)
⚡