BUGFIX: Always bundle custom svgs instead of using resource:// paths

esbuild.js

@@ -32,7 +32,8 @@ const options = {
     legalComments: "linked",
     loader: {
         '.js': 'tsx',
-        '.svg': 'dataurl',
+        '.dataurl.svg': 'dataurl',
+        '.svg': 'text',
         '.vanilla-css': 'css',
         '.woff2': 'file'
     },
@@ -53,13 +54,6 @@ const options = {
                     }
                 })
 
-                // load ckeditor icons as plain text and not via `.svg: dataurl`
-                // (currently neccessary for the table select handle icon)
-                onLoad({filter: /node_modules\/@ckeditor\/.*\.svg$/}, async ({path}) => ({
-                    contents: (await require('fs/promises').readFile(path)).toString(),
-                    loader: 'text'
-                }))
-
                 // prefix Fontawesome with "neos-" to prevent clashes with customer Fontawesome
                 onLoad({filter: /@fortawesome\/fontawesome-svg-core\/styles\.css$/}, async ({path}) => {
                     const contents = (await require('fs/promises').readFile(path)).toString();

packages/neos-ui-containers/src/InsertModeSelector/index.js

@@ -1,12 +1,16 @@
 import React, {PureComponent} from 'react';
 import PropTypes from 'prop-types';
 
-import {ButtonGroup, Button, Icon} from '@neos-project/react-ui-components';
+import {ButtonGroup, Button, ResourceIcon} from '@neos-project/react-ui-components';
 import {neos} from '@neos-project/neos-ui-decorators';
 import I18n from '@neos-project/neos-ui-i18n';
 
 import style from './style.module.css';
 
+import createAboveIcon from './resources/create-above.svg';
+import createBelowIcon from './resources/create-below.svg';
+import createInsideIcon from './resources/create-inside.svg';
+
 const MODE_AFTER = 'after';
 const MODE_BEFORE = 'before';
 const MODE_INTO = 'into';
@@ -98,7 +102,7 @@ export default class InsertModeSelector extends PureComponent {
                         size="small"
                         title={`${i18nRegistry.translate('Neos.Neos:Main:insert')} ${i18nRegistry.translate('above')}`}
                     >
-                        <Icon icon="resource://Neos.Neos.Ui/Icons/create-above.svg" className={style.iconAlignment} size="1x"/>
+                        <ResourceIcon source={createAboveIcon} className={style.iconAlignment}/>
                         <I18n id="Neos.Neos.Ui:Main:above" fallback="Above"/>
                     </Button>
                     <Button
@@ -109,7 +113,7 @@ export default class InsertModeSelector extends PureComponent {
                         size="small"
                         title={`${i18nRegistry.translate('Neos.Neos:Main:insert')} ${i18nRegistry.translate('below')}`}
                     >
-                        <Icon icon="resource://Neos.Neos.Ui/Icons/create-below.svg" className={style.iconAlignment} size="1x"/>
+                        <ResourceIcon source={createBelowIcon} className={style.iconAlignment}/>
                         <I18n id="Neos.Neos.Ui:Main:below" fallback="Below"/>
                     </Button>
                     <Button
@@ -120,7 +124,7 @@ export default class InsertModeSelector extends PureComponent {
                         size="small"
                         title={`${i18nRegistry.translate('Neos.Neos:Main:insert')} ${i18nRegistry.translate('into')}`}
                     >
-                        <Icon icon="resource://Neos.Neos.Ui/Icons/create-inside.svg" className={style.iconAlignment} size="1x"/>
+                        <ResourceIcon source={createInsideIcon} className={style.iconAlignment}/>
                         <I18n id="Neos.Neos.Ui:Main:inside" fallback="Inside"/>
                     </Button>
                 </ButtonGroup>

packages/neos-ui-editors/src/Editors/Image/Components/PreviewScreen/index.js

@@ -5,6 +5,7 @@ import {AssetUpload} from '../../../../Library/index';
 
 import {Thumbnail} from '../../Utils/index';
 import {Icon} from '@neos-project/react-ui-components';
+import dummyImage from '../../resource/dummy-image.dataurl.svg';
 import style from './style.module.css';
 
 export default class PreviewScreen extends PureComponent {
@@ -52,7 +53,7 @@ export default class PreviewScreen extends PureComponent {
                         </div>
                         <img
                             className={(thumbnail ? style.cropArea__image : style['cropArea__image--placeholder'])}
-                            src={thumbnail ? thumbnail.uri : '/_Resources/Static/Packages/Neos.Neos/Images/dummy-image.svg'}
+                            src={thumbnail ? thumbnail.uri : dummyImage}
                             style={thumbnail ? thumbnail.styles.thumbnail : {}}
                             alt={propertyName}
                             />

packages/neos-ui-editors/src/SecondaryEditors/ImageCropper/index.js

@@ -8,6 +8,7 @@ import {$get} from 'plow-js';
 
 import AspectRatioDropDown from './AspectRatioDropDown/index';
 import CropConfiguration, {CustomAspectRatioOption, LockedAspectRatioStrategy} from './model.js';
+import dummyImage from '../../Editors/Image/resource/dummy-image.dataurl.svg';
 import style from './style.module.css';
 
 import './react_crop.vanilla-css';
@@ -182,7 +183,7 @@ export default class ImageCropper extends PureComponent {
         const aspectRatioLocked = cropConfiguration.aspectRatioStrategy instanceof LockedAspectRatioStrategy;
         const allowCustomRatios = cropConfiguration.aspectRatioOptions.some(option => option instanceof CustomAspectRatioOption);
         const {sourceImage, i18nRegistry} = this.props;
-        const src = sourceImage.previewUri || '/_Resources/Static/Packages/Neos.Neos/Images/dummy-image.svg';
+        const src = sourceImage.previewUri || dummyImage;
 
         const toolbarRef = el => {
             this.toolbarNode = el;

packages/react-ui-components/esbuild.js

@@ -71,7 +71,7 @@ async function main() {
         metafile: true,
         loader: {
             '.js': 'tsx',
-            '.svg': 'dataurl',
+            '.svg': 'text',
             '.css': 'copy'
         },
         plugins: [

packages/react-ui-components/src/Icon/resourceIcon.tsx

@@ -13,6 +13,11 @@ export interface ResourceIconProps extends Omit<IconProps, 'theme'> {
     readonly theme?: ResourceIconTheme;
 }
 
+/**
+ * @deprecated please refrain from using resource paths
+ * use the new react-ui-components/ResourceIcon instead.
+ * See also https://github.com/neos/neos-ui/issues/2092
+ */
 class ResourceIcon extends PureComponent<ResourceIconProps> {
     public static readonly defaultProps = defaultProps;
 

packages/react-ui-components/src/Logo/index.js

@@ -1,14 +1,11 @@
 import React, {PureComponent} from 'react';
+import {ResourceIcon} from '../ResourceIcon';
 
-import logo from './logo.svg';
+import logoSvg from './resource/logo.svg';
 import style from './style.module.css';
 
 export default class Logo extends PureComponent {
     render() {
-        return (
-            <div>
-                <img className={style.logo} src={logo} alt="Neos" />
-            </div>
-        );
+        return <ResourceIcon source={logoSvg} className={style.logo}></ResourceIcon>;
     }
 }

packages/react-ui-components/src/Logo/style.module.css

@@ -1,4 +1,3 @@
-.logo {
+.logo > svg {
     height: 24px;
-    width: auto;
 }

packages/react-ui-components/src/ResourceIcon/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import mergeClassNames from 'classnames';
+import style from './style.module.css';
+
+type ResourceIconProps = {
+    source?: string;
+    className?: string;
+    label?: string;
+}
+
+export function ResourceIcon(props: ResourceIconProps) {
+    const {source, className, label} = props;
+
+    if (!source) {
+        return null;
+    }
+
+    const classNames = mergeClassNames(
+        className,
+        {
+            [style['resource-icon']]: true
+        }
+    );
+
+    return <span dangerouslySetInnerHTML={{__html: source}} aria-label={label} className={classNames}></span>;
+}

packages/react-ui-components/src/ResourceIcon/style.module.css

@@ -0,0 +1,20 @@
+.resource-icon {
+    composes: reset from '../reset.module.css';
+    display: inline-block;
+    font: normal normal normal FontAwesome;
+    font-size: 14px/1;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+
+.resource-icon {
+    display: inline-grid;
+    width: 100%;
+    justify-content: center;
+}
+
+.resource-icon > svg {
+    fill: none;
+}

packages/react-ui-components/src/index.ts

@@ -11,6 +11,7 @@ export {default as DropDown} from './DropDown';
 export {default as Frame} from './Frame';
 export {default as Headline} from './Headline';
 export {default as Icon} from './Icon';
+export {ResourceIcon} from './ResourceIcon';
 export {default as IconButton} from './IconButton';
 export {default as IconButtonDropDown} from './IconButtonDropDown';
 export {default as Label} from './Label';