Skip to content

Commit 4154cce

Browse files
pugnascotiapugnascotia
authored
Use inline SVGs for icons (#160)
* Generate inline react components from SVGs during the build * Remove svg-sprite-loader * Don't apply a default title to icons
1 parent 96a7deb commit 4154cce

File tree

21 files changed

+2411
-1389
lines changed

21 files changed

+2411
-1389
lines changed

‎.babelrc

+12-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,17 @@
1818
"transform-async-generator-functions",
1919
"transform-object-rest-spread",
2020
// stage 2
21-
"transform-class-properties"
21+
"transform-class-properties",
22+
[
23+
"inline-react-svg",
24+
{
25+
"svgo": {
26+
"plugins": [
27+
{ "cleanupIDs": false },
28+
{ "removeViewBox": false },
29+
]
30+
}
31+
}
32+
]
2233
]
2334
}

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@
4444
"babel-jest": "21.0.0",
4545
"babel-loader": "7.1.2",
4646
"babel-plugin-add-module-exports": "0.2.1",
47+
"babel-plugin-inline-react-svg": "0.5.2",
4748
"babel-plugin-transform-async-generator-functions": "6.24.1",
4849
"babel-plugin-transform-class-properties": "6.24.1",
4950
"babel-plugin-transform-object-rest-spread": "6.26.0",
@@ -84,7 +85,6 @@
8485
"sass-loader": "6.0.6",
8586
"sinon": "4.0.1",
8687
"style-loader": "0.19.0",
87-
"svg-sprite-loader": "3.3.1",
8888
"webpack": "3.8.1",
8989
"webpack-dev-server": "2.9.2",
9090
"yeoman-generator": "2.0.1",

‎src-docs/webpack.config.js

+1-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
const path = require('path');
22
const HtmlWebpackPlugin = require(`html-webpack-plugin`);
3-
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');
43

54
module.exports = {
65
devtool: 'source-map',
@@ -29,9 +28,6 @@ module.exports = {
2928
test: /\.css$/,
3029
loaders: ['style-loader/useable', 'css-loader'],
3130
exclude: /node_modules/
32-
}, {
33-
test: /\.svg$/,
34-
loader: 'svg-sprite-loader'
3531
}, {
3632
test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
3733
loader: 'file-loader',
@@ -45,9 +41,7 @@ module.exports = {
4541
inject: 'body',
4642
cache: true,
4743
showErrors: true
48-
}),
49-
50-
new SpriteLoaderPlugin()
44+
})
5145
],
5246

5347
devServer: {

‎src/components/accordion/__snapshots__/accordion.test.js.snap

+14-4
Original file line numberDiff line numberDiff line change
@@ -25,12 +25,22 @@ exports[`EuiAccordion is rendered 1`] = `
2525
>
2626
<svg
2727
class="euiIcon euiIcon--medium"
28+
height="16"
29+
viewBox="0 0 16 16"
30+
width="16"
31+
xlink="http://www.w3.org/1999/xlink"
32+
xmlns="http://www.w3.org/2000/svg"
2833
>
29-
<title>
30-
arrow right icon
31-
</title>
34+
<defs>
35+
<path
36+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
37+
id="arrow_right-a"
38+
/>
39+
</defs>
3240
<use
33-
href="#arrow_right"
41+
fill-rule="nonzero"
42+
href="#arrow_right-a"
43+
transform="matrix(0 1 1 0 0 0)"
3444
/>
3545
</svg>
3646
</div>

‎src/components/context_menu/__snapshots__/context_menu.test.js.snap

+98-28
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
2727
>
2828
<svg
2929
class="euiIcon euiContextMenu__icon euiIcon--medium"
30+
height="16"
31+
viewBox="0 0 16 16"
32+
width="16"
33+
xmlns="http://www.w3.org/2000/svg"
34+
xmlns:xlink="http://www.w3.org/1999/xlink"
3035
>
31-
<title>
32-
arrow left icon
33-
</title>
36+
<defs>
37+
<path
38+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
39+
id="arrow_left-a"
40+
/>
41+
</defs>
3442
<use
35-
xlink:href="#arrow_left"
43+
fill-rule="nonzero"
44+
transform="rotate(90 8 8)"
45+
xlink:href="#arrow_left-a"
3646
/>
3747
</svg>
3848
<span
@@ -70,12 +80,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
7080
>
7181
<svg
7282
class="euiIcon euiContextMenu__icon euiIcon--medium"
83+
height="16"
84+
viewBox="0 0 16 16"
85+
width="16"
86+
xmlns="http://www.w3.org/2000/svg"
87+
xmlns:xlink="http://www.w3.org/1999/xlink"
7388
>
74-
<title>
75-
arrow left icon
76-
</title>
89+
<defs>
90+
<path
91+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
92+
id="arrow_left-a"
93+
/>
94+
</defs>
7795
<use
78-
xlink:href="#arrow_left"
96+
fill-rule="nonzero"
97+
transform="rotate(90 8 8)"
98+
xlink:href="#arrow_left-a"
7999
/>
80100
</svg>
81101
<span
@@ -105,12 +125,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
105125
>
106126
<svg
107127
class="euiIcon euiContextMenu__icon euiIcon--medium"
128+
height="16"
129+
viewBox="0 0 16 16"
130+
width="16"
131+
xmlns="http://www.w3.org/2000/svg"
132+
xmlns:xlink="http://www.w3.org/1999/xlink"
108133
>
109-
<title>
110-
arrow left icon
111-
</title>
134+
<defs>
135+
<path
136+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
137+
id="arrow_left-a"
138+
/>
139+
</defs>
112140
<use
113-
xlink:href="#arrow_left"
141+
fill-rule="nonzero"
142+
transform="rotate(90 8 8)"
143+
xlink:href="#arrow_left-a"
114144
/>
115145
</svg>
116146
<span
@@ -135,12 +165,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
135165
</span>
136166
<svg
137167
class="euiIcon euiContextMenu__arrow euiIcon--medium"
168+
height="16"
169+
viewBox="0 0 16 16"
170+
width="16"
171+
xmlns="http://www.w3.org/2000/svg"
172+
xmlns:xlink="http://www.w3.org/1999/xlink"
138173
>
139-
<title>
140-
arrow right icon
141-
</title>
174+
<defs>
175+
<path
176+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
177+
id="arrow_right-a"
178+
/>
179+
</defs>
142180
<use
143-
xlink:href="#arrow_right"
181+
fill-rule="nonzero"
182+
transform="matrix(0 1 1 0 0 0)"
183+
xlink:href="#arrow_right-a"
144184
/>
145185
</svg>
146186
</span>
@@ -159,12 +199,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
159199
</span>
160200
<svg
161201
class="euiIcon euiContextMenu__arrow euiIcon--medium"
202+
height="16"
203+
viewBox="0 0 16 16"
204+
width="16"
205+
xmlns="http://www.w3.org/2000/svg"
206+
xmlns:xlink="http://www.w3.org/1999/xlink"
162207
>
163-
<title>
164-
arrow right icon
165-
</title>
208+
<defs>
209+
<path
210+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
211+
id="arrow_right-a"
212+
/>
213+
</defs>
166214
<use
167-
xlink:href="#arrow_right"
215+
fill-rule="nonzero"
216+
transform="matrix(0 1 1 0 0 0)"
217+
xlink:href="#arrow_right-a"
168218
/>
169219
</svg>
170220
</span>
@@ -183,12 +233,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
183233
</span>
184234
<svg
185235
class="euiIcon euiContextMenu__arrow euiIcon--medium"
236+
height="16"
237+
viewBox="0 0 16 16"
238+
width="16"
239+
xmlns="http://www.w3.org/2000/svg"
240+
xmlns:xlink="http://www.w3.org/1999/xlink"
186241
>
187-
<title>
188-
arrow right icon
189-
</title>
242+
<defs>
243+
<path
244+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
245+
id="arrow_right-a"
246+
/>
247+
</defs>
190248
<use
191-
xlink:href="#arrow_right"
249+
fill-rule="nonzero"
250+
transform="matrix(0 1 1 0 0 0)"
251+
xlink:href="#arrow_right-a"
192252
/>
193253
</svg>
194254
</span>
@@ -216,12 +276,22 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
216276
>
217277
<svg
218278
class="euiIcon euiContextMenu__icon euiIcon--medium"
279+
height="16"
280+
viewBox="0 0 16 16"
281+
width="16"
282+
xlink="http://www.w3.org/1999/xlink"
283+
xmlns="http://www.w3.org/2000/svg"
219284
>
220-
<title>
221-
arrow left icon
222-
</title>
285+
<defs>
286+
<path
287+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
288+
id="arrow_left-a"
289+
/>
290+
</defs>
223291
<use
224-
href="#arrow_left"
292+
fill-rule="nonzero"
293+
href="#arrow_left-a"
294+
transform="rotate(90 8 8)"
225295
/>
226296
</svg>
227297
<span

‎src/components/context_menu/__snapshots__/context_menu_item.test.js.snap

+14-4
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,22 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
3232
/>
3333
<svg
3434
class="euiIcon euiContextMenu__arrow euiIcon--medium"
35+
height="16"
36+
viewBox="0 0 16 16"
37+
width="16"
38+
xlink="http://www.w3.org/1999/xlink"
39+
xmlns="http://www.w3.org/2000/svg"
3540
>
36-
<title>
37-
arrow right icon
38-
</title>
41+
<defs>
42+
<path
43+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
44+
id="arrow_right-a"
45+
/>
46+
</defs>
3947
<use
40-
href="#arrow_right"
48+
fill-rule="nonzero"
49+
href="#arrow_right-a"
50+
transform="matrix(0 1 1 0 0 0)"
4151
/>
4252
</svg>
4353
</span>

‎src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap

+14-4
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,22 @@ exports[`EuiContextMenuPanel props onClose renders a button as a title 1`] = `
2828
>
2929
<svg
3030
class="euiIcon euiContextMenu__icon euiIcon--medium"
31+
height="16"
32+
viewBox="0 0 16 16"
33+
width="16"
34+
xlink="http://www.w3.org/1999/xlink"
35+
xmlns="http://www.w3.org/2000/svg"
3136
>
32-
<title>
33-
arrow left icon
34-
</title>
37+
<defs>
38+
<path
39+
d="M13.069 5.157L8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0z"
40+
id="arrow_left-a"
41+
/>
42+
</defs>
3543
<use
36-
href="#arrow_left"
44+
fill-rule="nonzero"
45+
href="#arrow_left-a"
46+
transform="rotate(90 8 8)"
3747
/>
3848
</svg>
3949
<span

‎src/components/form/field_password/__snapshots__/field_password.test.js.snap

+13-4
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,21 @@ exports[`EuiFieldPassword is rendered 1`] = `
1212
/>
1313
<svg
1414
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
15+
height="16"
16+
viewBox="0 0 16 16"
17+
width="16"
18+
xlink="http://www.w3.org/1999/xlink"
19+
xmlns="http://www.w3.org/2000/svg"
1520
>
16-
<title>
17-
lock icon
18-
</title>
21+
<defs>
22+
<path
23+
d="M3 5a5 5 0 0 1 10 0h1a1 1 0 0 1 1 1v9a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h1zm6.33 6.493L10 13H6l.67-1.507a2 2 0 1 1 2.66 0zM2 15h12V6H2v9zM8 1C5.794 1 4 2.794 4 5h8c0-2.206-1.794-4-4-4z"
24+
id="lock-a"
25+
/>
26+
</defs>
1927
<use
20-
href="#lock"
28+
fill-rule="evenodd"
29+
href="#lock-a"
2130
/>
2231
</svg>
2332
</div>

‎src/components/form/field_search/__snapshots__/field_search.test.js.snap

+12-4
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,20 @@ exports[`EuiFieldSearch is rendered 1`] = `
1212
/>
1313
<svg
1414
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
15+
height="16"
16+
viewBox="0 0 16 16"
17+
width="16"
18+
xlink="http://www.w3.org/1999/xlink"
19+
xmlns="http://www.w3.org/2000/svg"
1520
>
16-
<title>
17-
search icon
18-
</title>
21+
<defs>
22+
<path
23+
d="M11.271 11.978l3.872 3.873a.502.502 0 0 0 .708 0 .502.502 0 0 0 0-.708l-3.565-3.564c2.38-2.747 2.267-6.923-.342-9.532-2.73-2.73-7.17-2.73-9.898 0-2.728 2.729-2.728 7.17 0 9.9a6.955 6.955 0 0 0 4.949 2.05.5.5 0 0 0 0-1 5.96 5.96 0 0 1-4.242-1.757 6.01 6.01 0 0 1 0-8.486c2.337-2.34 6.143-2.34 8.484 0a6.01 6.01 0 0 1 0 8.486.5.5 0 0 0 .034.738z"
24+
id="search-a"
25+
/>
26+
</defs>
1927
<use
20-
href="#search"
28+
href="#search-a"
2129
/>
2230
</svg>
2331
</div>

0 commit comments

Comments
 (0)