NOT DONE

GoogleForCreators · Feb 2, 2022 · 78fc4d0 · 78fc4d0
1 parent 0afe518
commit 78fc4d0
Show file tree

Hide file tree

Showing 14 changed files with 175 additions and 170 deletions.
diff --git a/.storybook/main.cjs b/.storybook/main.cjs
@@ -73,6 +73,10 @@ module.exports = {
 
     // These should be sync'd with the config in `webpack.config.cjs`.
     config.module.rules.unshift(
+      {
+        type: 'asset',
+        resourceQuery: /react/,
+      },
       {
         test: /\.svg$/,
         use: [
@@ -95,7 +99,6 @@ module.exports = {
               },
             },
           },
-          'url-loader',
           assetLoader,
         ],
         exclude: [/images\/.*\.svg$/],
@@ -123,7 +126,6 @@ module.exports = {
               },
             },
           },
-          'url-loader',
         ],
         include: [/images\/.*\.svg$/],
       },

diff --git a/packages/dashboard/src/icons/index.js b/packages/dashboard/src/icons/index.js
@@ -17,8 +17,8 @@
 /**
  * Internal dependencies
  */
-export { ReactComponent as Compass } from './compass.svg';
-export { ReactComponent as FloppyDisk } from './floppyDisk.svg';
-export { ReactComponent as HomeWithHeart } from './homeWithHeart.svg';
-export { ReactComponent as Menu } from './menu.svg';
-export { ReactComponent as MoreVertical } from './moreVertical.svg';
+export { default as Compass } from './compass.svg?react';
+export { default as FloppyDisk } from './floppyDisk.svg?react';
+export { default as HomeWithHeart } from './homeWithHeart.svg?react';
+export { default as Menu } from './menu.svg?react';
+export { default as MoreVertical } from './moreVertical.svg?react';
diff --git a/packages/design-system/src/components/mediaInput/index.js b/packages/design-system/src/components/mediaInput/index.js
@@ -41,7 +41,7 @@ import { Pencil } from '../../icons';
 import { Menu } from '../menu';
 import { Tooltip } from '../tooltip';
 import { PLACEMENT, Popup } from '../popup';
-import { ReactComponent as Landscape } from './landscape.svg';
+import { default as Landscape } from './landscape.svg?react';
 import { MEDIA_VARIANTS } from './constants';
 
 export { MEDIA_VARIANTS };

diff --git a/packages/design-system/src/icons/index.js b/packages/design-system/src/icons/index.js
diff --git a/packages/design-system/src/icons/svg.js b/packages/design-system/src/icons/svg.js
@@ -17,4 +17,5 @@
 /**
  * Internal dependencies
  */
-export { default as ArrowCircle } from './arrow_circle.svg';
+export { default as ArrowCircle } from './arrow_circle.svg?react';
+export { default as SVGArrowCircle } from './arrow_circle.svg';
diff --git a/packages/design-system/src/images/index.js b/packages/design-system/src/images/index.js
@@ -17,10 +17,10 @@
 /**
  * Internal dependencies
  */
-export { ReactComponent as Logo } from './logo_bw.svg';
-export { ReactComponent as LogoColor } from './logo_color.svg';
-export { ReactComponent as LogoWithTypeCircle } from './logo_with_type_circle_bw.svg';
-export { ReactComponent as LogoWithTypeCircleColor } from './logo_with_type_circle_color.svg';
-export { ReactComponent as LogoWithType } from './logo_with_type_bw.svg';
-export { ReactComponent as DesertColor } from './desert_color.svg';
-export { ReactComponent as DesertBw } from './desert_bw.svg';
+export { default as Logo } from './logo_bw.svg?react';
+export { default as LogoColor } from './logo_color.svg?react';
+export { default as LogoWithTypeCircle } from './logo_with_type_circle_bw.svg?react';
+export { default as LogoWithTypeCircleColor } from './logo_with_type_circle_color.svg?react';
+export { default as LogoWithType } from './logo_with_type_bw.svg?react';
+export { default as DesertColor } from './desert_color.svg?react';
+export { default as DesertBw } from './desert_bw.svg?react';
diff --git a/packages/stories-block/src/block/icons.js b/packages/stories-block/src/block/icons.js
@@ -22,19 +22,19 @@ import { useInstanceId } from '@wordpress/compose';
 /**
  * Internal dependencies
  */
-import { ReactComponent as CirclesCarouselViewIcon } from './images/view-type/circles-carousel-view.svg';
-import { ReactComponent as CirclesCarouselConfigIcon } from './images/config-panel/circles-carousel-view-panel-icon.svg';
-import { ReactComponent as LatestStoriesBlockIcon } from './icons/block-type/latest-stories-block.svg';
-import { ReactComponent as SelectedStoriesBlockIcon } from './icons/block-type/selected-stories-block.svg';
-import { ReactComponent as EmbedStoriesBlockIcon } from './icons/block-type/embed-story-block.svg';
-
-import { ReactComponent as GridViewIcon } from './icons/view-type/grid-view.svg';
-import { ReactComponent as ListViewIcon } from './icons/view-type/list-view.svg';
-import { ReactComponent as BoxCarouselViewIcon } from './icons/view-type/box-carousel-view.svg';
-
-import { ReactComponent as GridViewConfigIcon } from './icons/config-panel/grid-view-panel-icon.svg';
-import { ReactComponent as ListViewConfigIcon } from './icons/config-panel/list-view-panel-icon.svg';
-import { ReactComponent as BoxCarouselConfigIcon } from './icons/config-panel/box-carousel-view-panel-icon.svg';
+import { default as CirclesCarouselViewIcon } from './images/view-type/circles-carousel-view.svg?react';
+import { default as CirclesCarouselConfigIcon } from './images/config-panel/circles-carousel-view-panel-icon.svg?react';
+import { default as LatestStoriesBlockIcon } from './icons/block-type/latest-stories-block.svg?react';
+import { default as SelectedStoriesBlockIcon } from './icons/block-type/selected-stories-block.svg?react';
+import { default as EmbedStoriesBlockIcon } from './icons/block-type/embed-story-block.svg?react';
+
+import { default as GridViewIcon } from './icons/view-type/grid-view.svg?react';
+import { default as ListViewIcon } from './icons/view-type/list-view.svg?react';
+import { default as BoxCarouselViewIcon } from './icons/view-type/box-carousel-view.svg?react';
+
+import { default as GridViewConfigIcon } from './icons/config-panel/grid-view-panel-icon.svg?react';
+import { default as ListViewConfigIcon } from './icons/config-panel/list-view-panel-icon.svg?react';
+import { default as BoxCarouselConfigIcon } from './icons/config-panel/box-carousel-view-panel-icon.svg?react';
 
 // Icons for block types.
 export const LATEST_STORIES_BLOCK_ICON = (

diff --git a/packages/story-editor/src/app/media/media3p/attribution.js b/packages/story-editor/src/app/media/media3p/attribution.js
@@ -28,7 +28,7 @@ import {
  * Internal dependencies
  */
 import { TenorLogoFull, UnsplashLogoFull } from '../../../icons';
-import { ReactComponent as CoverrLogoFull } from '../../../images/coverr_logo.svg';
+import { default as CoverrLogoFull } from '../../../images/coverr_logo.svg?react';
 
 const AttributionPill = styled.div`
   position: absolute;

diff --git a/packages/story-editor/src/components/canvas/pageAttachment/index.js b/packages/story-editor/src/components/canvas/pageAttachment/index.js
@@ -28,8 +28,8 @@ import { useCanvas } from '../../../app';
 import Popup from '../../popup';
 import useElementsWithLinks from '../../../utils/useElementsWithLinks';
 import { OUTLINK_THEME } from '../../../constants';
-import { ReactComponent as DefaultIcon } from './defaultIcon.svg';
-import { ReactComponent as ArrowIcon } from './arrowBar.svg';
+import { default as DefaultIcon } from './defaultIcon.svg?react';
+import { default as ArrowIcon } from './arrowBar.svg?react';
 
 const Wrapper = styled.div`
   position: absolute;

diff --git a/packages/story-editor/src/components/helpCenter/quickTip/index.js b/packages/story-editor/src/components/helpCenter/quickTip/index.js
@@ -34,7 +34,7 @@ import { NAVIGATION_HEIGHT } from '../../secondaryPopup';
 import { GUTTER_WIDTH } from '../constants';
 import { useConfig } from '../../../app';
 import { Transitioner } from './transitioner';
-import { ReactComponent as DoneCheckmark } from './doneCheckmark.svg';
+import { default as DoneCheckmark } from './doneCheckmark.svg?react';
 
 const Panel = styled.div`
   width: 100%;

diff --git a/packages/story-editor/src/components/library/panes/pageTemplates/templateSave.js b/packages/story-editor/src/components/library/panes/pageTemplates/templateSave.js
@@ -37,7 +37,7 @@ import { useAPI } from '../../../../app/api';
 import { useStory } from '../../../../app/story';
 import { focusStyle } from '../../../panels/shared';
 import isDefaultPage from '../../../../utils/isDefaultPage';
-import { ReactComponent as Icon } from './images/illustration.svg';
+import { default as Icon } from './images/illustration.svg?react';
 
 const StyledText = styled(Text)`
   color: ${({ theme }) => theme.colors.fg.secondary};

diff --git a/packages/story-editor/src/components/moveable/moveStyle.js b/packages/story-editor/src/components/moveable/moveStyle.js
@@ -18,7 +18,7 @@
  * External dependencies
  */
 import { createGlobalStyle } from 'styled-components';
-import { SVGIcons } from '@googleforcreators/design-system';
+// import svg from '@googleforcreators/design-system/src/icons/arrow'
 
 export const GlobalStyle = createGlobalStyle`
   .default-moveable .moveable-control,
@@ -124,7 +124,7 @@ export const GlobalStyle = createGlobalStyle`
     height: 28px;
     left: -1px;
     top: -1px;
-    background-image: url('${SVGIcons.ArrowCircle}');
+    /* background-image: url('${SVGIcons.SVGArrowCircle}'); */
     background-size: 100%;
     /* The icon is black and we can't use color because it's not inline so invert it is */
     filter: invert(100%);

diff --git a/packages/story-editor/src/icons/index.js b/packages/story-editor/src/icons/index.js
@@ -14,5 +14,5 @@
  * limitations under the License.
  */
 
-export { ReactComponent as TenorLogoFull } from './tenor_logo_white.svg';
-export { ReactComponent as UnsplashLogoFull } from './unsplash_logo_full.svg';
+export { default as TenorLogoFull } from './tenor_logo_white.svg?react';
+export { default as UnsplashLogoFull } from './unsplash_logo_full.svg?react';
diff --git a/webpack.config.cjs b/webpack.config.cjs
@@ -70,7 +70,7 @@ const sharedConfig = {
         enforce: 'pre',
         resolve: {
           fullySpecified: false,
-        }
+        },
       },
       {
         test: /\.worker\.js$/,
@@ -102,6 +102,10 @@ const sharedConfig = {
         ],
       },
       // These should be sync'd with the config in `.storybook/main.cjs`.
+      {
+        type: 'asset',
+        resourceQuery: /react/,
+      },
       {
         test: /\.svg$/,
         use: [
@@ -124,7 +128,6 @@ const sharedConfig = {
               },
             },
           },
-          'url-loader',
         ],
         exclude: [/images\/.*\.svg$/],
       },
@@ -151,7 +154,6 @@ const sharedConfig = {
               },
             },
           },
-          'url-loader',
         ],
         include: [/images\/.*\.svg$/],
       },