Fix svg loading

examples/cra-kitchen-sink/src/stories/cra-svgr.stories.js

@@ -1,7 +1,5 @@
-// FIXME: @igor-dv
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import { ReactComponent as Logo } from '../logo.svg';
 
-// import React from 'react';
-// import { storiesOf } from '@storybook/react';
-// import { ReactComponent as Logo } from '../logo.svg';
-//
-// storiesOf('CRA', module).add('Svgr', () => <Logo />);
+storiesOf('CRA', module).add('Svgr', () => <Logo />);

examples/official-storybook/jest.config.js

@@ -0,0 +1,17 @@
+const config = require('../../jest.config');
+
+module.exports = {
+  ...config,
+  roots: [__dirname],
+  moduleNameMapper: {
+    '\\.(jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':
+      '<rootDir>/__mocks__/fileMock.js',
+    '\\.(css|scss)$': '<rootDir>/__mocks__/styleMock.js',
+    '\\.(md)$': '<rootDir>/__mocks__/htmlMock.js',
+  },
+  transform: {
+    ...config.transform,
+    '^.+\\.svg$': '<rootDir>/node_modules/react-scripts/config/jest/fileTransform.js',
+  },
+  moduleDirectories: ['<rootDir>/node_modules', 'src'],
+};

examples/official-storybook/package.json

@@ -36,6 +36,7 @@
     "@storybook/node-logger": "5.1.0-alpha.1",
     "@storybook/react": "5.1.0-alpha.1",
     "@storybook/theming": "5.1.0-alpha.1",
+    "@svgr/webpack": "^4.1.0",
     "cors": "^2.8.5",
     "cross-env": "^5.2.0",
     "enzyme-to-json": "^3.3.5",
@@ -52,6 +53,7 @@
     "react-dom": "^16.8.3",
     "storybook-chromatic": "^1.2.6",
     "ts-loader": "^5.3.3",
+    "url-loader": "^1.1.2",
     "uuid": "^3.3.2",
     "webpack": "^4.29.6"
   }

examples/official-storybook/stories/core/webpack.stories.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ReactComponent as Logo } from './storybook-logo.svg';
+
+export default {
+  title: 'Core|Webpack',
+};
+
+export const svg = () => <Logo />;
+svg.title = 'SVG Loader';

examples/official-storybook/tests/__snapshots__/storyshots.test.js.snap

@@ -5259,6 +5259,12 @@ exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
 </div>
 `;
 
+exports[`Storyshots Core|Webpack SVG Loader 1`] = `
+<svg>
+  storybook-logo.svg
+</svg>
+`;
+
 exports[`Storyshots UI|Notifications/Item longText 1`] = `
 .emotion-0 {
   display: block;

examples/official-storybook/webpack.config.js

@@ -6,6 +6,10 @@ module.exports = async ({ config }) => ({
   module: {
     ...config.module,
     rules: [
+      {
+        test: /\.svg$/,
+        use: ['@svgr/webpack'],
+      },
       ...config.module.rules,
       {
         test: /\.stories\.jsx?$/,

jest.config.js

@@ -17,13 +17,9 @@ module.exports = {
     '<rootDir>/examples/vue-kitchen-sink',
     '<rootDir>/examples/angular-cli',
     '<rootDir>/examples/preact-kitchen-sink',
-  ],
-  roots: [
-    '<rootDir>/addons',
-    '<rootDir>/app',
-    '<rootDir>/lib',
     '<rootDir>/examples/official-storybook',
   ],
+  roots: ['<rootDir>/addons', '<rootDir>/app', '<rootDir>/lib'],
   transform: {
     '^.+\\.jsx?$': '<rootDir>/scripts/babel-jest.js',
     '^.+\\.tsx?$': '<rootDir>/node_modules/ts-jest',

yarn.lock

@@ -2204,7 +2204,7 @@
     merge-deep "^3.0.2"
     svgo "^1.1.1"
 
-"@svgr/webpack@4.1.0", "@svgr/webpack@^4.0.3":
+"@svgr/webpack@4.1.0", "@svgr/webpack@^4.0.3", "@svgr/webpack@^4.1.0":
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.1.0.tgz#20c88f32f731c7b1d4711045b2b993887d731c28"
   integrity sha512-d09ehQWqLMywP/PT/5JvXwPskPK9QCXUjiSkAHehreB381qExXf5JFCBWhfEyNonRbkIneCeYM99w+Ud48YIQQ==
@@ -11139,6 +11139,7 @@ graphql-request@^1.5.0:
 graphql@^0.13.2, graphql@^14.1.1:
   version "0.13.2"
   resolved "https://registry.yarnpkg.com/graphql/-/graphql-0.13.2.tgz#4c740ae3c222823e7004096f832e7b93b2108270"
+  integrity sha512-QZ5BL8ZO/B20VA8APauGBg3GyEgZ19eduvpLWoq5x7gMmWnHoy8rlQWPLmWgFvo1yNgjSEFMesmS4R6pPr7xog==
   dependencies:
     iterall "^1.2.1"
 
@@ -12822,6 +12823,7 @@ istextorbinary@2.1.0:
 iterall@^1.2.1:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/iterall/-/iterall-1.2.2.tgz#92d70deb8028e0c39ff3164fdbf4d8b088130cd7"
+  integrity sha512-yynBb1g+RFUPY64fTrFv7nsjRrENBQJaX2UL+2Szc9REFrSNm1rpSXHGzhmAy7a9uv3vlvgBlXnf9RqmPH1/DA==
 
 jasmine-core@~2.8.0:
   version "2.8.0"