Skip to content

Commit

Permalink
Import SVGs as React components (#1388) (#3718)
Browse files Browse the repository at this point in the history
* Import SVGs as React components (#1388)

* Updated webpack production config and fixed tests

* Improved Jest SVG file transform

* Improved SVG tests

* Add a comment

* Update webpack.config.prod.js
  • Loading branch information
iansu authored and gaearon committed Jan 17, 2018
1 parent f6ad7fe commit 82907fd
Show file tree
Hide file tree
Showing 6 changed files with 91 additions and 1 deletion.
12 changes: 11 additions & 1 deletion packages/react-scripts/config/jest/fileTransform.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,16 @@ const path = require('path');

module.exports = {
process(src, filename) {
return `module.exports = ${JSON.stringify(path.basename(filename))};`;
const assetFilename = JSON.stringify(path.basename(filename));

if (filename.match(/\.svg$/)) {
return `module.exports = {
__esModule: true,
default: ${assetFilename},
ReactComponent: () => ${assetFilename},
};`;
}

return `module.exports = ${assetFilename};`;
},
};
25 changes: 25 additions & 0 deletions packages/react-scripts/config/webpack.config.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -262,6 +262,31 @@ module.exports = {
},
],
},
// Allows you to use two kinds of imports for SVG:
// import logoUrl from './logo.svg'; gives you the URL.
// import { ReactComponent as Logo } from './logo.svg'; gives you a component.
{
test: /\.svg$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
cacheDirectory: true,
},
},
require.resolve('svgr/webpack'),
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
// "file" loader makes sure those assets get served by WebpackDevServer.
// When you `import` an asset, you get its (virtual) filename.
// In production, they would get copied to the `build` folder.
Expand Down
25 changes: 25 additions & 0 deletions packages/react-scripts/config/webpack.config.prod.js
Original file line number Diff line number Diff line change
Expand Up @@ -304,6 +304,31 @@ module.exports = {
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
// Allows you to use two kinds of imports for SVG:
// import logoUrl from './logo.svg'; gives you the URL.
// import { ReactComponent as Logo } from './logo.svg'; gives you a component.
{
test: /\.svg$/,
use: [
{
loader: require.resolve('babel-loader'),
options: {
// @remove-on-eject-begin
babelrc: false,
presets: [require.resolve('babel-preset-react-app')],
// @remove-on-eject-end
cacheDirectory: true,
},
},
require.resolve('svgr/webpack'),
{
loader: require.resolve('file-loader'),
options: {
name: 'static/media/[name].[hash:8].[ext]',
},
},
],
},
// "file" loader makes sure assets end up in the `build` folder.
// When you `import` an asset, you get its filename.
// This loader doesn't use a "test" so it will catch all modules
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import { ReactComponent as Logo } from './assets/logo.svg';

export default () => <Logo />;
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
/**
* Copyright (c) 2015-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/

import React from 'react';
import ReactDOM from 'react-dom';
import SvgComponent from './SvgComponent';

describe('svg component', () => {
it('renders without crashing', () => {
const div = document.createElement('div');
ReactDOM.render(<SvgComponent />, div);
expect(div.textContent).toBe('logo.svg');
});
});
1 change: 1 addition & 0 deletions packages/react-scripts/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"raf": "3.4.0",
"react-dev-utils": "^5.0.0",
"style-loader": "0.19.1",
"svgr": "1.6.0",
"sw-precache-webpack-plugin": "0.11.4",
"thread-loader": "1.1.2",
"uglifyjs-webpack-plugin": "1.1.6",
Expand Down

0 comments on commit 82907fd

Please sign in to comment.