Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use inline SVGs for icons #160

Merged
merged 5 commits into from
Nov 30, 2017
Merged

Use inline SVGs for icons #160

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
abba7ec
Generate inline react components from SVGs during the build
pugnascotia Nov 22, 2017
78185b1
Remove svg-sprite-loader
pugnascotia Nov 22, 2017
905824b
Pin babel-plugin-inline-react-svg version
pugnascotia Nov 23, 2017
cfe802d
Don't apply a default title to icons
pugnascotia Nov 23, 2017
522c410
Test fixes after rebase to master
pugnascotia Nov 23, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion .babelrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,17 @@
"transform-async-generator-functions",
"transform-object-rest-spread",
// stage 2
"transform-class-properties"
"transform-class-properties",
[
"inline-react-svg",
{
"svgo": {
"plugins": [
{ "cleanupIDs": false },
{ "removeViewBox": false },
]
}
}
]
]
}
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"babel-jest": "21.0.0",
"babel-loader": "7.1.2",
"babel-plugin-add-module-exports": "0.2.1",
"babel-plugin-inline-react-svg": "0.5.2",
"babel-plugin-transform-async-generator-functions": "6.24.1",
"babel-plugin-transform-class-properties": "6.24.1",
"babel-plugin-transform-object-rest-spread": "6.26.0",
Expand Down Expand Up @@ -84,7 +85,6 @@
"sass-loader": "6.0.6",
"sinon": "4.0.1",
"style-loader": "0.19.0",
"svg-sprite-loader": "3.3.1",
"webpack": "3.8.1",
"webpack-dev-server": "2.9.2",
"yeoman-generator": "2.0.1",
Expand Down
8 changes: 1 addition & 7 deletions src-docs/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
const path = require('path');
const HtmlWebpackPlugin = require(`html-webpack-plugin`);
const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

module.exports = {
devtool: 'source-map',
Expand Down Expand Up @@ -29,9 +28,6 @@ module.exports = {
test: /\.css$/,
loaders: ['style-loader/useable', 'css-loader'],
exclude: /node_modules/
}, {
test: /\.svg$/,
loader: 'svg-sprite-loader'
}, {
test: /\.(woff|woff2|ttf|eot|ico)(\?|$)/,
loader: 'file-loader',
Expand All @@ -45,9 +41,7 @@ module.exports = {
inject: 'body',
cache: true,
showErrors: true
}),

new SpriteLoaderPlugin()
})
],

devServer: {
Expand Down
18 changes: 14 additions & 4 deletions src/components/accordion/__snapshots__/accordion.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,12 +25,22 @@ exports[`EuiAccordion is rendered 1`] = `
>
<svg
class="euiIcon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
arrow right icon
</title>
<defs>
<path
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"
id="arrow_right-a"
/>
</defs>
<use
href="#arrow_right"
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
</div>
Expand Down
126 changes: 98 additions & 28 deletions src/components/context_menu/__snapshots__/context_menu.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
>
<svg
class="euiIcon euiContextMenu__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow left icon
</title>
<defs>
<path
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"
id="arrow_left-a"
/>
</defs>
<use
xlink:href="#arrow_left"
fill-rule="nonzero"
transform="rotate(90 8 8)"
xlink:href="#arrow_left-a"
/>
</svg>
<span
Expand Down Expand Up @@ -70,12 +80,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
>
<svg
class="euiIcon euiContextMenu__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow left icon
</title>
<defs>
<path
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"
id="arrow_left-a"
/>
</defs>
<use
xlink:href="#arrow_left"
fill-rule="nonzero"
transform="rotate(90 8 8)"
xlink:href="#arrow_left-a"
/>
</svg>
<span
Expand Down Expand Up @@ -105,12 +125,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
>
<svg
class="euiIcon euiContextMenu__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow left icon
</title>
<defs>
<path
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"
id="arrow_left-a"
/>
</defs>
<use
xlink:href="#arrow_left"
fill-rule="nonzero"
transform="rotate(90 8 8)"
xlink:href="#arrow_left-a"
/>
</svg>
<span
Expand All @@ -135,12 +165,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
</span>
<svg
class="euiIcon euiContextMenu__arrow euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow right icon
</title>
<defs>
<path
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"
id="arrow_right-a"
/>
</defs>
<use
xlink:href="#arrow_right"
fill-rule="nonzero"
transform="matrix(0 1 1 0 0 0)"
xlink:href="#arrow_right-a"
/>
</svg>
</span>
Expand All @@ -159,12 +199,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
</span>
<svg
class="euiIcon euiContextMenu__arrow euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow right icon
</title>
<defs>
<path
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"
id="arrow_right-a"
/>
</defs>
<use
xlink:href="#arrow_right"
fill-rule="nonzero"
transform="matrix(0 1 1 0 0 0)"
xlink:href="#arrow_right-a"
/>
</svg>
</span>
Expand All @@ -183,12 +233,22 @@ exports[`EuiContextMenu props panels and initialPanelId allows you to click the
</span>
<svg
class="euiIcon euiContextMenu__arrow euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
>
<title>
arrow right icon
</title>
<defs>
<path
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"
id="arrow_right-a"
/>
</defs>
<use
xlink:href="#arrow_right"
fill-rule="nonzero"
transform="matrix(0 1 1 0 0 0)"
xlink:href="#arrow_right-a"
/>
</svg>
</span>
Expand Down Expand Up @@ -216,12 +276,22 @@ exports[`EuiContextMenu props panels and initialPanelId renders the referenced p
>
<svg
class="euiIcon euiContextMenu__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
arrow left icon
</title>
<defs>
<path
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"
id="arrow_left-a"
/>
</defs>
<use
href="#arrow_left"
fill-rule="nonzero"
href="#arrow_left-a"
transform="rotate(90 8 8)"
/>
</svg>
<span
Expand Down
18 changes: 14 additions & 4 deletions src/components/context_menu/__snapshots__/context_menu_item.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,22 @@ exports[`EuiContextMenuItem props hasPanel is rendered 1`] = `
/>
<svg
class="euiIcon euiContextMenu__arrow euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
arrow right icon
</title>
<defs>
<path
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"
id="arrow_right-a"
/>
</defs>
<use
href="#arrow_right"
fill-rule="nonzero"
href="#arrow_right-a"
transform="matrix(0 1 1 0 0 0)"
/>
</svg>
</span>
Expand Down
18 changes: 14 additions & 4 deletions src/components/context_menu/__snapshots__/context_menu_panel.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,12 +28,22 @@ exports[`EuiContextMenuPanel props onClose renders a button as a title 1`] = `
>
<svg
class="euiIcon euiContextMenu__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
arrow left icon
</title>
<defs>
<path
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"
id="arrow_left-a"
/>
</defs>
<use
href="#arrow_left"
fill-rule="nonzero"
href="#arrow_left-a"
transform="rotate(90 8 8)"
/>
</svg>
<span
Expand Down
17 changes: 13 additions & 4 deletions src/components/form/field_password/__snapshots__/field_password.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,21 @@ exports[`EuiFieldPassword is rendered 1`] = `
/>
<svg
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
lock icon
</title>
<defs>
<path
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"
id="lock-a"
/>
</defs>
<use
href="#lock"
fill-rule="evenodd"
href="#lock-a"
/>
</svg>
</div>
Expand Down
16 changes: 12 additions & 4 deletions src/components/form/field_search/__snapshots__/field_search.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,20 @@ exports[`EuiFieldSearch is rendered 1`] = `
/>
<svg
class="euiIcon euiFormControlLayout__icon euiIcon--medium"
height="16"
viewBox="0 0 16 16"
width="16"
xlink="http://www.w3.org/1999/xlink"
xmlns="http://www.w3.org/2000/svg"
>
<title>
search icon
</title>
<defs>
<path
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"
id="search-a"
/>
</defs>
<use
href="#search"
href="#search-a"
/>
</svg>
</div>
Expand Down
Loading