dependecies

dependencies.json

@@ -0,0 +1,4 @@
+{
+    "recipesEndpoint": "https://api.github.com/repos/ibexa/recipes-dev/contents/index.json?ref=flex/pull-145",
+    "packages": []
+}

package.json

@@ -14,4 +14,3 @@
         "prettier-test": "yarn prettier \"./src/bundle/Resources/**/*.{js,ts,scss}\" \"./src/bundle/ui-dev/**/*.{js,tsx}\" --check"
     }
 }
-

src/bundle/ui-dev/src/modules/common/icon/icon.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { isExternalInstance } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper';
+import { createCssClassNames } from '../helpers/css.class.names';
+
+import UrlIcon from './urlIcon';
+import InculdedIcon from './inculdedIcon';
+
+const Icon = (props) => {
+    const cssClass = createCssClassNames({
+        'ibexa-icon': true,
+        [props.extraClasses]: true,
+    });
+
+    const isIconIncluded = props.useIncludedIcon || isExternalInstance();
+
+    return (
+        <>
+            {isIconIncluded ? (
+                <InculdedIcon cssClass={cssClass} name={props.name} defaultIconName={props.defaultIconName} />
+            ) : (
+                <UrlIcon cssClass={cssClass} name={props.name} customPath={props.customPath} />
+            )}
+        </>
+    );
+};
+
+Icon.propTypes = {
+    extraClasses: PropTypes.string,
+    name: PropTypes.string,
+    customPath: PropTypes.string,
+    useIncludedIcon: PropTypes.bool,
+    defaultIconName: PropTypes.string,
+};
+
+Icon.defaultProps = {
+    customPath: null,
+    name: null,
+    extraClasses: null,
+    useIncludedIcon: false,
+    defaultIconName: 'about-info',
+};
+
+export default Icon;

src/bundle/ui-dev/src/modules/common/icon/urlIcon.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { getIconPath } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/icon.helper';
+
+const UrlIcon = (props) => {
+    const linkHref = props.customPath ?? getIconPath(props.name);
+
+    return (
+        <svg className={props.cssClass}>
+            <use xlinkHref={linkHref} />
+        </svg>
+    );
+};
+
+UrlIcon.propTypes = {
+    cssClass: PropTypes.string,
+    name: PropTypes.string,
+    customPath: PropTypes.string,
+};
+
+UrlIcon.defaultProps = {
+    customPath: null,
+    name: null,
+    cssClass: '',
+};
+
+export default UrlIcon;

src/bundle/ui-dev/src/modules/common/thumbnail/thumbnail.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import Icon from '../icon/icon';
 
 interface ThumbnailProps {