Enhance Icon (#70)

Author: hahnlee

src/components/Icon/Icon.tsx

@@ -10,8 +10,6 @@ import Styled from './Icon.styled'
 export const ICON_TEST_ID = 'ch-design-system-icon'
 
 function Icon({
-  className,
-  style,
   name,
   color,
   testId = ICON_TEST_ID,
@@ -20,18 +18,18 @@ function Icon({
   marginRight = 0,
   marginBottom = 0,
   marginLeft = 0,
+  ...props
 }: IconProps) {
   if (_.isNil(icons[name])) { return null }
 
   return (
     <Styled
+      {...props}
       data-testid={testId}
-      className={className}
       color={color}
       as={icons[name]}
       width={size}
       height={size}
-      style={style}
       marginTop={marginTop}
       marginRight={marginRight}
       marginBottom={marginBottom}

src/components/Icon/Icon.types.ts

@@ -1,7 +1,12 @@
+/* External dependencies */
+import React from 'react'
+
 /* Internal dependencies */
 import { StylableComponentProps } from '../../types/ComponentProps'
 import { IconName } from './generated'
 
+type SVGProps = React.SVGProps<SVGSVGElement>
+
 export enum IconSize {
   L = 34,
   Normal = 24,
@@ -18,7 +23,7 @@ export interface IconStyledProps {
   marginLeft: number
 }
 
-export default interface IconProps extends StylableComponentProps {
+export default interface IconProps extends StylableComponentProps, Omit<SVGProps, 'ref'> {
   name: IconName
   color?: string
   size?: IconSize

src/components/Icon/assets/app-plus.svg

@@ -0,0 +1,15 @@
+import React from 'react'
+
+function SvgAppPlus(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M12 3v2H6.927A1.927 1.927 0 005 6.927v10.146C5 18.137 5.863 19 6.927 19h10.146A1.927 1.927 0 0019 17.073V12h2v5.073A3.928 3.928 0 0117.073 21H6.927A3.927 3.927 0 013 17.073V6.927A3.928 3.928 0 016.927 3H12zm6 0v3h3v2h-3v3h-2V8h-3V6h3V3h2z"
+      />
+    </svg>
+  )
+}
+
+export default SvgAppPlus

src/components/Icon/generated/AppPlus.tsx

@@ -2,6 +2,7 @@
 import All from './All'
 import Android from './Android'
 import AppCheck from './AppCheck'
+import AppPlus from './AppPlus'
 import AppPush from './AppPush'
 import Apple from './Apple'
 import AppsAdd from './AppsAdd'
@@ -328,6 +329,7 @@ const icons = {
   'all': All,
   'android': Android,
   'app-check': AppCheck,
+  'app-plus': AppPlus,
   'app-push': AppPush,
   'apple': Apple,
   'apps-add': AppsAdd,