Skip to content

Commit f6aecea

Browse files
pugnascotiapugnascotia
committed
Experiment with inline SVGs for icons
1 parent bcc3c49 commit f6aecea

File tree

5 files changed

+163
-165
lines changed

5 files changed

+163
-165
lines changed

‎.babelrc

+2-1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"transform-async-generator-functions",
1919
"transform-object-rest-spread",
2020
// stage 2
21-
"transform-class-properties"
21+
"transform-class-properties",
22+
"inline-react-svg"
2223
]
2324
}

‎package.json

+1
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
"babel-jest": "21.0.0",
4444
"babel-loader": "7.1.2",
4545
"babel-plugin-add-module-exports": "0.2.1",
46+
"babel-plugin-inline-react-svg": "^0.5.2",
4647
"babel-plugin-transform-async-generator-functions": "6.24.1",
4748
"babel-plugin-transform-class-properties": "6.24.1",
4849
"babel-plugin-transform-object-rest-spread": "6.26.0",

‎scripts/compile-eui.sh

-9
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,6 @@ compile_lib() {
2020
src
2121
tput rc
2222
echo -e "${color_green}✔ Finished compiling src/ to lib/${color_reset}" >&2
23-
24-
# Also copy over SVGs. Babel has a --copy-files option but that brings over
25-
# all kinds of things we don't want into the lib folder.
26-
mkdir -p lib/components/icon/assets
27-
for SVG in $(cd src && find components -name \*.svg); do
28-
cp "src/$SVG" "lib/$SVG"
29-
done
30-
31-
echo -e "${color_green}✔ Finished copying SVGs${color_reset}" >&2
3223
}
3324

3425
compile_bundle() {

‎src/components/icon/icon.js

+138-152
Original file line numberDiff line numberDiff line change
@@ -2,149 +2,149 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33
import classNames from 'classnames';
44

5-
import './assets/app_apm.svg';
6-
import './assets/app_dashboard.svg';
7-
import './assets/app_devtools.svg';
8-
import './assets/app_discover.svg';
9-
import './assets/app_graph.svg';
10-
import './assets/app_logging.svg';
11-
import './assets/app_ml.svg';
12-
import './assets/app_monitoring.svg';
13-
import './assets/app_timelion.svg';
14-
import './assets/app_visualize.svg';
15-
import './assets/apps.svg';
16-
import './assets/arrow_down.svg';
17-
import './assets/arrow_left.svg';
18-
import './assets/arrow_right.svg';
19-
import './assets/arrow_up.svg';
20-
import './assets/bolt.svg';
21-
import './assets/boxes_horizontal.svg';
22-
import './assets/boxes_vertical.svg';
23-
import './assets/brush.svg';
24-
import './assets/bullseye.svg';
25-
import './assets/check.svg';
26-
import './assets/clock.svg';
27-
import './assets/console.svg';
28-
import './assets/controls_horizontal.svg';
29-
import './assets/controls_vertical.svg';
30-
import './assets/copy.svg';
31-
import './assets/copy_clipboard.svg';
32-
import './assets/cross.svg';
33-
import './assets/document.svg';
34-
import './assets/dot.svg';
35-
import './assets/empty.svg';
36-
import './assets/face_happy.svg';
37-
import './assets/face_sad.svg';
38-
import './assets/full_screen.svg';
39-
import './assets/gear.svg';
40-
import './assets/grid.svg';
41-
import './assets/help.svg';
42-
import './assets/invert.svg';
43-
import './assets/link.svg';
44-
import './assets/list_add.svg';
45-
import './assets/list.svg';
46-
import './assets/lock.svg';
47-
import './assets/logo_beats.svg';
48-
import './assets/logo_cloud.svg';
49-
import './assets/logo_elastic.svg';
50-
import './assets/logo_elastic_search.svg';
51-
import './assets/logo_elastic_stack.svg';
52-
import './assets/logo_gmail.svg';
53-
import './assets/logo_logstash.svg';
54-
import './assets/logo_slack.svg';
55-
import './assets/logo_webhook.svg';
56-
import './assets/logo_xpack.svg';
57-
import './assets/logo_kibana.svg';
58-
import './assets/map_marker.svg';
59-
import './assets/minus_in_circle.svg';
60-
import './assets/node.svg';
61-
import './assets/pencil.svg';
62-
import './assets/pin.svg';
63-
import './assets/plus_in_circle.svg';
64-
import './assets/search.svg';
65-
import './assets/shard.svg';
66-
import './assets/share.svg';
67-
import './assets/sort_down.svg';
68-
import './assets/sort_up.svg';
69-
import './assets/star_empty.svg';
70-
import './assets/tear.svg';
71-
import './assets/trash.svg';
72-
import './assets/user.svg';
5+
import apmApp from './assets/app_apm.svg';
6+
import dashboardApp from './assets/app_dashboard.svg';
7+
import devToolsApp from './assets/app_devtools.svg';
8+
import discoverApp from './assets/app_discover.svg';
9+
import graphApp from './assets/app_graph.svg';
10+
import loggingApp from './assets/app_logging.svg';
11+
import machineLearningApp from './assets/app_ml.svg';
12+
import monitoringApp from './assets/app_monitoring.svg';
13+
import timelionApp from './assets/app_timelion.svg';
14+
import visualizeApp from './assets/app_visualize.svg';
15+
import apps from './assets/apps.svg';
16+
import arrowDown from './assets/arrow_down.svg';
17+
import arrowLeft from './assets/arrow_left.svg';
18+
import arrowRight from './assets/arrow_right.svg';
19+
import arrowUp from './assets/arrow_up.svg';
20+
import bolt from './assets/bolt.svg';
21+
import boxesHorizontal from './assets/boxes_horizontal.svg';
22+
import boxesVertical from './assets/boxes_vertical.svg';
23+
import brush from './assets/brush.svg';
24+
import bullseye from './assets/bullseye.svg';
25+
import check from './assets/check.svg';
26+
import clock from './assets/clock.svg';
27+
import console from './assets/console.svg';
28+
import controlsHorizontal from './assets/controls_horizontal.svg';
29+
import controlsVertical from './assets/controls_vertical.svg';
30+
import copy from './assets/copy.svg';
31+
import copyClipboard from './assets/copy_clipboard.svg';
32+
import cross from './assets/cross.svg';
33+
import document from './assets/document.svg';
34+
import dot from './assets/dot.svg';
35+
import empty from './assets/empty.svg';
36+
import faceHappy from './assets/face_happy.svg';
37+
import faceSad from './assets/face_sad.svg';
38+
import fullScreen from './assets/full_screen.svg';
39+
import gear from './assets/gear.svg';
40+
import grid from './assets/grid.svg';
41+
import help from './assets/help.svg';
42+
import invert from './assets/invert.svg';
43+
import link from './assets/link.svg';
44+
import listAdd from './assets/list_add.svg';
45+
import list from './assets/list.svg';
46+
import lock from './assets/lock.svg';
47+
import logoBeats from './assets/logo_beats.svg';
48+
import logoCloud from './assets/logo_cloud.svg';
49+
import logoElastic from './assets/logo_elastic.svg';
50+
import logoElasticSearch from './assets/logo_elastic_search.svg';
51+
import logoElasticStack from './assets/logo_elastic_stack.svg';
52+
import logoGmail from './assets/logo_gmail.svg';
53+
import logoLogstash from './assets/logo_logstash.svg';
54+
import logoSlack from './assets/logo_slack.svg';
55+
import logoWebhook from './assets/logo_webhook.svg';
56+
import logoXpack from './assets/logo_xpack.svg';
57+
import logoKibana from './assets/logo_kibana.svg';
58+
import mapMarker from './assets/map_marker.svg';
59+
import minusInCircle from './assets/minus_in_circle.svg';
60+
import node from './assets/node.svg';
61+
import pencil from './assets/pencil.svg';
62+
import pin from './assets/pin.svg';
63+
import plusInCircle from './assets/plus_in_circle.svg';
64+
import search from './assets/search.svg';
65+
import shard from './assets/shard.svg';
66+
import share from './assets/share.svg';
67+
import sortDown from './assets/sort_down.svg';
68+
import sortUp from './assets/sort_up.svg';
69+
import starEmpty from './assets/star_empty.svg';
70+
import tear from './assets/tear.svg';
71+
import trash from './assets/trash.svg';
72+
import user from './assets/user.svg';
7373

7474
const humanizeCamelCase = str => (
7575
// Put spaces between words in camel-cased strings.
7676
str.replace(/([A-Z])/g, g => ` ${g[0].toLowerCase()}`)
7777
);
7878

7979
const typeToIconMap = {
80-
apmApp: 'app_apm',
81-
apps: 'apps',
82-
arrowDown: 'arrow_down',
83-
arrowLeft: 'arrow_left',
84-
arrowRight: 'arrow_right',
85-
arrowUp: 'arrow_up',
86-
bolt: 'bolt',
87-
boxesHorizontal: 'boxes_horizontal',
88-
boxesVertical: 'boxes_vertical',
89-
brush: 'brush',
90-
bullseye: 'bullseye',
91-
check: 'check',
92-
clock: 'clock',
93-
console: 'console',
94-
controlsHorizontal: 'controls_horizontal',
95-
controlsVertical: 'controls_vertical',
96-
copy: 'copy',
97-
copyClipboard: 'copy_clipboard',
98-
cross: 'cross',
99-
dashboardApp: 'app_dashboard',
100-
devToolsApp: 'app_devtools',
101-
discoverApp: 'app_discover',
102-
document: 'document',
103-
dot: 'dot',
104-
empty: 'empty',
105-
faceHappy: 'face_happy',
106-
faceSad: 'face_sad',
107-
fullScreen: 'full_screen',
108-
gear: 'gear',
109-
graphApp: 'app_graph',
110-
grid: 'grid',
111-
help: 'help',
112-
invert: 'invert',
113-
link: 'link',
114-
list: 'list',
115-
listAdd: 'list_add',
116-
lock: 'lock',
117-
loggingApp: 'app_logging',
118-
logoBeats: 'logo_beats',
119-
logoCloud: 'logo_cloud',
120-
logoElastic: 'logo_elastic',
121-
logoElasticSearch: 'logo_elastic_search',
122-
logoElasticStack: 'logo_elastic_stack',
123-
logoGmail: 'logo_gmail',
124-
logoKibana: 'logo_kibana',
125-
logoLogstash: 'logo_logstash',
126-
logoSlack: 'logo_slack',
127-
logoWebhook: 'logo_webhook',
128-
logoXpack: 'logo_xpack',
129-
machineLearningApp: 'app_ml',
130-
mapMarker: 'map_marker',
131-
minusInCircle: 'minus_in_circle',
132-
monitoringApp: 'app_monitoring',
133-
node: 'node',
134-
pencil: 'pencil',
135-
pin: 'pin',
136-
plusInCircle: 'plus_in_circle',
137-
search: 'search',
138-
shard: 'shard',
139-
share: 'share',
140-
sortDown: 'sort_down',
141-
sortUp: 'sort_up',
142-
starEmpty: 'star_empty',
143-
tear: 'tear',
144-
timelionApp: 'app_timelion',
145-
trash: 'trash',
146-
user: 'user',
147-
visualizeApp: 'app_visualize',
80+
apmApp,
81+
apps,
82+
arrowDown,
83+
arrowLeft,
84+
arrowRight,
85+
arrowUp,
86+
bolt,
87+
boxesHorizontal,
88+
boxesVertical,
89+
brush,
90+
bullseye,
91+
check,
92+
clock,
93+
console,
94+
controlsHorizontal,
95+
controlsVertical,
96+
copy,
97+
copyClipboard,
98+
cross,
99+
dashboardApp,
100+
devToolsApp,
101+
discoverApp,
102+
document,
103+
dot,
104+
empty,
105+
faceHappy,
106+
faceSad,
107+
fullScreen,
108+
gear,
109+
graphApp,
110+
grid,
111+
help,
112+
invert,
113+
link,
114+
list,
115+
listAdd,
116+
lock,
117+
loggingApp,
118+
logoBeats,
119+
logoCloud,
120+
logoElastic,
121+
logoElasticSearch,
122+
logoElasticStack,
123+
logoGmail,
124+
logoKibana,
125+
logoLogstash,
126+
logoSlack,
127+
logoWebhook,
128+
logoXpack,
129+
machineLearningApp,
130+
mapMarker,
131+
minusInCircle,
132+
monitoringApp,
133+
node,
134+
pencil,
135+
pin,
136+
plusInCircle,
137+
search,
138+
shard,
139+
share,
140+
sortDown,
141+
sortUp,
142+
starEmpty,
143+
tear,
144+
timelionApp,
145+
trash,
146+
user,
147+
visualizeApp
148148
};
149149

150150
export const TYPES = Object.keys(typeToIconMap);
@@ -180,23 +180,9 @@ export const EuiIcon = ({
180180
className,
181181
...rest
182182
}) => {
183+
const SvgComponent = typeToIconMap[type]
183184
const classes = classNames('euiIcon', className, sizeToClassNameMap[size], colorToClassMap[color]);
184-
185-
const titleText = title
186-
? title
187-
: `${humanizeCamelCase(type)} icon`;
188-
189-
const svgReference = <use xlinkHref={`#${typeToIconMap[type]}`} />;
190-
191-
return (
192-
<svg
193-
className={classes}
194-
{...rest}
195-
>
196-
<title>{titleText}</title>
197-
{svgReference}
198-
</svg>
199-
);
185+
return <SvgComponent className={ classes } />
200186
};
201187

202188
EuiIcon.propTypes = {

0 commit comments

Comments
 (0)