feat: added support for icomoon icons (#129)

EightfoldAI · May 23, 2022 · b3d8bcd · b3d8bcd
1 parent 7b4912d
commit b3d8bcd
Show file tree

Hide file tree

Showing 9 changed files with 283 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -125,6 +125,7 @@
         "html-replace-webpack-plugin": "2.5.6",
         "html-webpack-plugin": "5.5.0",
         "husky": "7.0.4",
+        "icomoon-react": "3.0.0",
         "identity-obj-proxy": "3.0.0",
         "install-peers": "1.0.3",
         "install-peers-cli": "2.2.0",

diff --git a/src/components/ConfigProvider/ConfigProvider.tsx b/src/components/ConfigProvider/ConfigProvider.tsx
@@ -22,6 +22,7 @@ const ConfigProvider: FC<ConfigProviderProps> = ({
         focusVisibleElement: DEFAULT_FOCUS_VISIBLE_ELEMENT,
     },
     themeOptions: defaultThemeOptions,
+    icomoonIconSet = {},
 }) => {
     const [themeOptions, setThemeOptions] =
         useState<ThemeOptions>(defaultThemeOptions);
@@ -59,6 +60,7 @@ const ConfigProvider: FC<ConfigProviderProps> = ({
                 themeOptions,
                 setThemeOptions,
                 registeredTheme,
+                icomoonIconSet,
             }}
         >
             <div className={`theme-${themeOptions.name}`}>{children}</div>

diff --git a/src/components/ConfigProvider/ConfigProvider.types.ts b/src/components/ConfigProvider/ConfigProvider.types.ts
@@ -5,6 +5,7 @@ export interface IConfigContext {
     themeOptions: ThemeOptions;
     setThemeOptions: (themeOptions: ThemeOptions) => void;
     registeredTheme?: IRegisterTheme;
+    icomoonIconSet?: Object;
 }
 
 export interface ConfigProviderProps {
@@ -18,4 +19,9 @@ export interface ConfigProviderProps {
      * @default { focusVisible: true, focusVisibleElement: document.documentElement }
      */
     focusVisibleOptions?: FocusVisibleOptions;
+    /**
+     * selection.json as generated by icomoon for icons
+     * @default {}
+     */
+    icomoonIconSet?: Object;
 }
diff --git a/src/components/Icon/Icon.stories.tsx b/src/components/Icon/Icon.stories.tsx
@@ -1,5 +1,7 @@
 import React from 'react';
 import { Icon, IconName, IconSize } from './index';
+import { ConfigProvider } from '../ConfigProvider';
+import iconSet from './selection.json';
 
 export default {
     title: 'Icon',
@@ -22,3 +24,22 @@ export const Icons = () => (
         <Icon path={IconName.mdiCardsHeart} size={IconSize.Large} />
     </>
 );
+
+export const IcomoonIcons = () => (
+    <ConfigProvider
+        icomoonIconSet={iconSet}
+        themeOptions={{
+            name: 'blue',
+        }}
+    >
+        <h1>Icons</h1>
+        <p>X-Small</p>
+        <Icon icomoonIconName="pencil" size={IconSize.XSmall} />
+        <br />
+        <p>Large</p>
+        <Icon icomoonIconName="pencil" size={IconSize.Large} />
+        <br />
+        <p>Multicolor Icon</p>
+        <Icon icomoonIconName="CareerHub" size={IconSize.Large} />
+    </ConfigProvider>
+);
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -1,9 +1,12 @@
 import React, { FC } from 'react';
+import IcomoonReact from 'icomoon-react';
+
 import { mergeClasses } from '../../shared/utilities';
 import { Icon as MdiIcon } from '@mdi/react';
 import { IconProps, IconSize } from './index';
 
 import styles from './icon.module.scss';
+import { useConfig } from '../ConfigProvider';
 
 export const Icon: FC<IconProps> = ({
     ariaHidden = false,
@@ -20,12 +23,37 @@ export const Icon: FC<IconProps> = ({
     title,
     vertical,
     'data-test-id': dataTestId,
+    icomoonIconName,
 }) => {
+    const { icomoonIconSet } = useConfig();
+
     const iconClassNames: string = mergeClasses([
         classNames,
         styles.iconWrapper,
     ]);
 
+    const iconComponent = icomoonIconName ? (
+        <IcomoonReact
+            iconSet={icomoonIconSet}
+            size={size}
+            color={color}
+            icon={icomoonIconName}
+            role="presentation"
+        />
+    ) : (
+        <MdiIcon
+            color={color}
+            description={description}
+            horizontal={horizontal}
+            path={path}
+            rotate={rotate}
+            size={size}
+            title={title}
+            vertical={vertical}
+            spin={spin}
+        />
+    );
+
     return (
         <span
             data-test-id={dataTestId}
@@ -34,17 +62,7 @@ export const Icon: FC<IconProps> = ({
             id={id}
             role={role}
         >
-            <MdiIcon
-                color={color}
-                description={description}
-                horizontal={horizontal}
-                path={path}
-                rotate={rotate}
-                size={size}
-                title={title}
-                vertical={vertical}
-                spin={spin}
-            />
+            {iconComponent}
         </span>
     );
 };
diff --git a/src/components/Icon/Icon.types.ts b/src/components/Icon/Icon.types.ts
@@ -9,11 +9,13 @@ export enum IconSize {
     XSmall = '14px',
 }
 
-export interface IconProps extends OcBaseProps<HTMLSpanElement>, MdiIconProps {
+export interface IconProps
+    extends OcBaseProps<HTMLSpanElement>,
+        Omit<MdiIconProps, 'path'> {
     /**
      * The icon svg path name.
      */
-    path: IconName;
+    path?: IconName;
     /**
      * The icon is aria-hidden.
      * @default false
@@ -65,4 +67,8 @@ export interface IconProps extends OcBaseProps<HTMLSpanElement>, MdiIconProps {
      * @default false
      */
     vertical?: boolean;
+    /**
+     * Name of the icon as defined in icomoon app
+     */
+    icomoonIconName?: string;
 }
diff --git a/src/components/Icon/selection.json b/src/components/Icon/selection.json
@@ -0,0 +1,183 @@
+{
+    "IcoMoonType": "selection",
+    "icons": [
+        {
+            "icon": {
+                "paths": [
+                    "M102.4 153.6v716.8h241.912v-139.999h79.375v139.999h241.912v-716.8h-563.2zM181.777 233.867h81.268v78.399h-81.268v-78.399zM344.312 233.867h79.375v78.399h-79.375v-78.399zM504.955 233.867h81.267v78.399h-81.267v-78.399zM181.777 392.532h81.268v80.269h-81.268v-80.269zM344.312 392.532h79.375v80.269h-79.375v-80.269zM504.955 392.532h81.267v80.269h-81.267v-80.269zM181.777 551.201h81.268v80.266h-81.268v-80.266zM344.312 551.201h79.375v80.266h-79.375v-80.266zM504.955 551.201h81.267v80.266h-81.267v-80.266zM181.777 711.734h81.268v78.4h-81.268v-78.4zM504.955 711.734h81.267v78.4h-81.267v-78.4z",
+                    "M598.536 358.4h108.529c14.303 0 26.501 5.478 36.598 16.435 10.936 10.112 16.404 22.333 16.404 36.662v54.359h108.531c14.303 0 26.501 5.478 36.598 16.435 10.936 10.115 16.404 22.756 16.404 37.926v295.821c0 15.171-5.468 28.234-16.404 39.191-10.097 10.115-22.295 15.171-36.598 15.171h-431.596c-14.303 0-26.921-5.056-37.86-15.171-10.094-10.957-15.142-24.020-15.142-39.191v-295.821c0-15.171 5.048-27.812 15.142-37.926 10.939-10.957 23.557-16.435 37.86-16.435h108.531v-54.359c0-14.328 5.046-26.55 15.142-36.662 10.936-10.957 23.557-16.435 37.86-16.435zM707.064 465.856v-54.359h-108.529v54.359h108.529z"
+                ],
+                "attrs": [
+                    { "fill": "rgb(80, 206, 225)" },
+                    { "fill": "rgb(20, 109, 166)", "opacity": 0.6 }
+                ],
+                "isMulticolor": true,
+                "isMulticolor2": true,
+                "grid": 0,
+                "tags": ["CareerHub"],
+                "colorPermutations": {
+                    "201091661802062251": [{ "f": 1 }, { "f": 0 }]
+                }
+            },
+            "attrs": [
+                { "fill": "rgb(80, 206, 225)" },
+                { "fill": "rgb(20, 109, 166)", "opacity": 0.6 }
+            ],
+            "properties": {
+                "order": 3,
+                "id": 0,
+                "name": "CareerHub",
+                "prevSize": 32,
+                "code": 59648,
+                "codes": [59648, 59649]
+            },
+            "setIdx": 0,
+            "setId": 2,
+            "iconIdx": 0
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M1024 608l-192-192v-288h-128v160l-192-192-512 512v32h128v320h320v-192h128v192h320v-320h128z"
+                ],
+                "tags": ["home", "house"],
+                "defaultCode": 59650,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "home3, house3",
+                "name": "home3",
+                "order": 4,
+                "id": 3,
+                "prevSize": 32,
+                "code": 59650
+            },
+            "setIdx": 1,
+            "setId": 1,
+            "iconIdx": 2
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M0 1024h512v-1024h-512v1024zM320 128h128v128h-128v-128zM320 384h128v128h-128v-128zM320 640h128v128h-128v-128zM64 128h128v128h-128v-128zM64 384h128v128h-128v-128zM64 640h128v128h-128v-128zM576 320h448v64h-448zM576 1024h128v-256h192v256h128v-576h-448z"
+                ],
+                "tags": ["office", "buildings", "work"],
+                "defaultCode": 59651,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "office, buildings",
+                "name": "office",
+                "order": 5,
+                "id": 4,
+                "prevSize": 32,
+                "code": 59651
+            },
+            "setIdx": 1,
+            "setId": 1,
+            "iconIdx": 3
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M896 256v-128h-896v704c0 35.346 28.654 64 64 64h864c53.022 0 96-42.978 96-96v-544h-128zM832 832h-768v-640h768v640zM128 320h640v64h-640zM512 448h256v64h-256zM512 576h256v64h-256zM512 704h192v64h-192zM128 448h320v320h-320z"
+                ],
+                "tags": ["newspaper", "news", "paper"],
+                "defaultCode": 59652,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "newspaper, news",
+                "name": "newspaper",
+                "order": 6,
+                "id": 5,
+                "prevSize": 32,
+                "code": 59652
+            },
+            "setIdx": 1,
+            "setId": 1,
+            "iconIdx": 4
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M864 0c88.364 0 160 71.634 160 160 0 36.020-11.91 69.258-32 96l-64 64-224-224 64-64c26.742-20.090 59.978-32 96-32zM64 736l-64 288 288-64 592-592-224-224-592 592zM715.578 363.578l-448 448-55.156-55.156 448-448 55.156 55.156z"
+                ],
+                "tags": ["pencil", "write", "edit"],
+                "defaultCode": 59653,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "pencil, write",
+                "name": "pencil",
+                "order": 7,
+                "id": 6,
+                "prevSize": 32,
+                "code": 59653
+            },
+            "setIdx": 1,
+            "setId": 1,
+            "iconIdx": 5
+        },
+        {
+            "icon": {
+                "paths": [
+                    "M384 640l128-64 448-448-64-64-448 448-64 128zM289.3 867.098c-31.632-66.728-65.666-100.762-132.396-132.394l99.096-272.792 128-77.912 384-384h-192l-384 384-192 640 640-192 384-384v-192l-384 384-77.912 128z"
+                ],
+                "tags": ["pencil", "write", "edit"],
+                "defaultCode": 59654,
+                "grid": 16,
+                "attrs": []
+            },
+            "attrs": [],
+            "properties": {
+                "ligatures": "pencil2, write2",
+                "name": "pencil2",
+                "order": 8,
+                "id": 7,
+                "prevSize": 32,
+                "code": 59654
+            },
+            "setIdx": 1,
+            "setId": 1,
+            "iconIdx": 6
+        }
+    ],
+    "height": 1024,
+    "metadata": { "name": "icomoon" },
+    "preferences": {
+        "showGlyphs": true,
+        "showQuickUse": true,
+        "showQuickUse2": true,
+        "showSVGs": true,
+        "fontPref": {
+            "prefix": "icon-",
+            "metadata": { "fontFamily": "icomoon" },
+            "metrics": { "emSize": 1024, "baseline": 6.25, "whitespace": 50 },
+            "embed": false,
+            "autoHost": true
+        },
+        "imagePref": {
+            "prefix": "icon-",
+            "png": true,
+            "useClassSelector": true,
+            "color": 0,
+            "bgColor": 16777215,
+            "classSelector": ".icon"
+        },
+        "historySize": 50,
+        "showCodes": true,
+        "gridSize": 16,
+        "quickUsageToken": {
+            "UntitledProject": "NWRmNjcxZTJiOGY2NjdmMjViNzdkOTliNWFiOWJhOGUjMSMxNjUzMDI0ODA4IyMjMTFiZDJhZjI4MDkz"
+        }
+    }
+}
diff --git a/tsconfig.json b/tsconfig.json
@@ -12,6 +12,7 @@
         "noUnusedParameters": true,
         "outDir": "lib",
         "removeComments": true,
+        "resolveJsonModule": true,
         "sourceMap": true,
         "target": "es5",
         "lib": ["es5", "es2015.promise", "dom"],