Feature: use package @ahaui/icons

README.md

@@ -27,13 +27,13 @@
 ## Quick start
 
 ### Installation
-You have to install both `@ahaui/react` and `@ahaui/css`
+You have to install both `@ahaui/react` and `@ahaui/css`. Aha Icons are served seperately at `@ahaui/icons` (optional but highly recommended).
 ```sh
 # With npm
-npm install @ahaui/react @ahaui/css
+npm install @ahaui/react @ahaui/css @ahaui/icons
 
 # Or with yarn
-yarn add @ahaui/react @ahaui/css
+yarn add @ahaui/react @ahaui/css @ahaui/icons
 ```
 
 ### Usage
@@ -58,12 +58,29 @@ function Example() {
 ```
 **Aha!** Just simple as that!
 
+If you also want to use Aha Icons, load it via [Aha Plugins](#Plugins)
+```jsx
+import React from 'react';
+import { Plugins, Icon } from '@ahaui/react';
+import { createIconAssetsPlugin } from '@ahaui/icons';
+
+const IconAssetsPlugin = createIconAssetsPlugin();
+
+Plugins.loadPlugin(IconAssetsPlugin);
+
+function ExampleIcon() {
+  return (
+    <Icon name="contact">
+  );
+}
+```
+
 ## Customization
 
 ### Plugins
 You can customize specific Aha React Components via plugins!
 
-For now, to provide your custom assets to [Logo](./src/components/Logo/index.js), [Avatar](./src/components/Avatar/index.js), [EmptyState](./src/components/Logo/index.js), you can use [AssetPlugin](./src/plugins/AssetPlugin.js).
+For now, to provide your custom assets to [Logo](./src/components/Logo/index.js), [Avatar](./src/components/Avatar/index.js), [EmptyState](./src/components/Logo/index.js) or [Icon](./src/components/Icon/index.js), you can use [AssetPlugin](./src/plugins/AssetPlugin.js).
 ```jsx
 import { AssetPlugin, Plugins, Logo } from '@ahaui/react';
 

src/components/Avatar/index.js

@@ -52,6 +52,8 @@ const Avatar = React.forwardRef(({ className, size, name, src, alt, height, widt
     srcOri = Plugins
       .getPlugins(PluginType.ASSET)
       .traverseCall('getAsset', 'avatar', nameOri)
+      .slice()
+      .reverse()
       .find(asset => !!asset);
   }
   const heightStyle = {

src/components/EmptyState/index.js

@@ -30,6 +30,8 @@ const EmptyState = React.forwardRef(({ className, children, name, src, fileType,
     srcOri = Plugins
       .getPlugins(PluginType.ASSET)
       .traverseCall('getAsset', 'emptyState', nameOri)
+      .slice()
+      .reverse()
       .find(asset => !!asset);
   }
   return (

src/components/Icon/index.js

@@ -1,151 +1,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { icons } from '../../constants';
+import { PluginType } from '../../constants/common';
+import Plugins from '../../plugins';
 
 const propTypes = {
-  /** The icon visual name */
+  /** The icon visual name, should be provide via an AssetPlugin with prefix "icon" */
   // eslint-disable-next-line no-sparse-arrays
-  name: PropTypes.oneOf([
-    'rotate',
-    'gitBranch',
-    'options',
-    'apps',
-    'fastForward',
-    'mail',
-    'trash',
-    'helpCircle',
-    'helpCircleOutline',
-    'cloudUpload',
-    'location',
-    'send',
-    'share',
-    'unlock',
-    'volumeHigh',
-    'volumeOff',
-    'zoomIn',
-    'zoomOut',
-    'expand',
-    'minus',
-    'plus',
-    'column',
-    'data',
-    'table',
-    'cart',
-    'store',
-    'workflow',
-    'bill',
-    'bag',
-    'funnel',
-    'playCircle',
-    'pin',
-    'card',
-    'chatExtension',
-    'chatBubbles',
-    'bubbles',
-    'code',
-    'create',
-    'earth',
-    'flag',
-    'journal',
-    'levelBeginner',
-    'levelImmediate',
-    'levelAdvanced',
-    'list',
-    'lock',
-    'moneyBag',
-    'multipleSkills',
-    'power',
-    'refresh',
-    'replace',
-    'search',
-    'setting',
-    'speedometer',
-    'starOutline',
-    'starHalf',
-    'star',
-    'thumbsDown',
-    'thumbsUp',
-    'alert',
-    'informationCircle',
-    'informationCircleOutline',
-    'notification',
-    'warning',
-    'attach',
-    'attachSpreadsheet',
-    'attachImage',
-    'attachPpt',
-    'attachTxt',
-    'attachSql',
-    'attachUndefined',
-    'attachCode',
-    'cloud',
-    'cloudDownload',
-    'copy',
-    'document',
-    'images',
-    'videoCam',
-    'arrowBack',
-    'arrowDown',
-    'arrowDropdownCircle',
-    'arrowDropdown',
-    'arrowDropleftCircle',
-    'arrowDropleft',
-    'arrowDroprightCircle',
-    'arrowDropright',
-    'arrowDropupCircle',
-    'arrowDropup',
-    'arrowForward',
-    'arrowRoundBack',
-    'arrowRoundDown',
-    'arrowRoundForward',
-    'arrowRoundUp',
-    'arrowUp',
-    'checkmark',
-    'checkmarkCircle',
-    'checkmarkCircleOutline',
-    'close',
-    'closeCircle',
-    'closeCircleOutline',
-    'menu',
-    'more',
-    'facebook',
-    'google',
-    'instagram',
-    'linkedin',
-    'twitter',
-    'youtube',
-    'hourglass',
-    'time',
-    'timer',
-    'contact',
-    'people',
-    'mic',
-    'calendar',,
-    'micOff',
-    'videoCamOff',
-    'camera',
-    'airplane',
-    'screen',
-    'screenOff',
-    'map',
-    'raiseHand',
-    'editOff',
-    'edit',
-    'cursor',
-    'eraser',
-    'font',
-    'colorPalette',
-    'save',
-    'flash',
-    'aim',
-    'fileTrayFull',
-    'fileImport',
-    'fileExport',
-    'objects',
-    'reply',
-    'bot',
-  ]),
+  name: PropTypes.string,
   /** Icon size variants */
   size: PropTypes.oneOf([
     'tiny',
@@ -189,10 +51,17 @@ const styles = {
 
 
 const Icon = React.forwardRef(({ className, path, size, name, ...props }, ref) => {
-  const pathOri = path;
+  let pathOri = path;
   let nameOri = name;
   if (pathOri) {
     nameOri = false;
+  } else if (nameOri) {
+    pathOri = Plugins
+      .getPlugins(PluginType.ASSET)
+      .traverseCall('getAsset', 'icon', nameOri)
+      .slice()
+      .reverse()
+      .find(asset => !!asset);
   }
   return (
     <svg
@@ -212,7 +81,7 @@ const Icon = React.forwardRef(({ className, path, size, name, ...props }, ref) =
     >
       <path
         style={styles.path}
-        d={nameOri ? icons[name] : pathOri}
+        d={pathOri}
       />
     </svg>
   );

src/components/Logo/index.js

@@ -28,6 +28,8 @@ const Logo = React.forwardRef(({ className, name, src, alt, height, width, as: C
     srcOri = Plugins
       .getPlugins(PluginType.ASSET)
       .traverseCall('getAsset', 'logo', nameOri)
+      .slice()
+      .reverse()
       .find(asset => !!asset);
   }
   return (