v0.1.4

.eslintignore

@@ -0,0 +1 @@
+src/components/Icon/generated/*.tsx

.gitignore

@@ -19,9 +19,6 @@
 .AppleDouble
 .LSOverride
 
-# Icon must end with two \r
-Icon
-
 # Thumbnails
 ._*
 

.svgrrc

@@ -0,0 +1,15 @@
+{
+  "icon": true,
+  "typescript": true,
+  "singleQuote": true,
+  "replaceAttrValues": {
+    "#65676A": "currentColor"
+  },
+  "prettier": true,
+  "prettierConfig": {
+    "dimensions": false,
+    "semi": false,
+    "endOfLine": "lf",
+    "singleQuote": true
+  }
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",
@@ -26,6 +26,7 @@
     "build": "rollup -c",
     "prepublishOnly": "npm run build",
     "build:storybook": "build-storybook",
+    "build:icon": "./scripts/build-icon.sh",
     "deploy:storybook": "storybook-to-ghpages --remote=upstream"
   },
   "husky": {
@@ -63,6 +64,7 @@
     "@storybook/addon-knobs": "^5.3.19",
     "@storybook/react": "^5.3.18",
     "@storybook/storybook-deployer": "^2.8.6",
+    "@svgr/cli": "^5.4.0",
     "@testing-library/jest-dom": "^5.5.0",
     "@testing-library/react": "^10.0.4",
     "@types/jest": "^25.2.1",

scripts/build-icon.sh

@@ -0,0 +1,7 @@
+#!/bin/bash
+
+./node_modules/@svgr/cli/bin/svgr \
+  -d ./src/components/Icon/generated \
+  --template ./scripts/icon-template.js \
+  --index-template ./scripts/icon-index-template.js \
+  ./src/components/Icon/assets

scripts/icon-index-template.js

@@ -0,0 +1,32 @@
+const _ = require('lodash')
+const path = require('path')
+
+function defaultIndexTemplate(filePaths) {
+  const importEntries = []
+  const mappedFies = []
+
+  filePaths.forEach(filePath => {
+    const basename = path.basename(filePath, path.extname(filePath))
+    const exportName = /^\d/.test(basename) ? `Svg${basename}` : basename
+    importEntries.push(`import ${exportName} from './${basename}'`)
+    mappedFies.push(`  '${_.kebabCase(basename)}': ${exportName},`)
+  })
+
+  const icons = `/* eslint-disable */
+
+const icons = {
+${mappedFies.join('\n')}
+}
+`
+
+  return `
+${importEntries.join('\n')}
+${icons}
+export type IconName = keyof typeof icons
+
+/* eslint-enable */
+export default icons
+`
+}
+
+module.exports = defaultIndexTemplate

scripts/icon-template.js

@@ -0,0 +1,19 @@
+function iconTemplate(
+  { template },
+  options,
+  { componentName, props, jsx },
+) {
+  return template.ast`
+import React from 'react'
+
+function ${componentName}(${props}) {
+  return (
+    ${jsx}
+  )
+}
+
+export default ${componentName}
+`
+}
+
+module.exports = iconTemplate

src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,84 @@
+/* External dependencies */
+import React from 'react'
+import { withKnobs, select, color, number } from '@storybook/addon-knobs'
+import styled from 'styled-components'
+
+/* Internal dependencies */
+import Pallette from '../../styling/Palette'
+import icons, { IconName } from './generated'
+import Icon from './Icon'
+
+export default {
+  title: 'Icon',
+  decorators: [withKnobs],
+}
+
+const iconList: IconName[] = Object.keys(icons) as IconName[]
+
+const IconSize = {
+  L: 34,
+  Normal: 24,
+  S: 20,
+  XS: 16,
+  XXS: 12,
+}
+
+const IconInfo = styled.div`
+  width: 120px;
+  height: 120px;
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`
+
+const Name = styled.p`
+  text-align: center;
+`
+
+export const AllIcons = () => {
+  const size = select('size', IconSize, IconSize.Normal)
+  const selectedColor = color('color', Pallette.grey700)
+
+  return (
+    <>
+      { iconList.map((iconName) => (
+        <IconInfo key={iconName}>
+          <Icon
+            name={iconName}
+            color={selectedColor}
+            size={size}
+          />
+          <Name>{ iconName }</Name>
+        </IconInfo>
+      )) }
+    </>
+  )
+}
+
+export const Primary = () => (
+  <Icon
+    name={select('name', iconList, 'zoyi') as IconName}
+    color={color('color', Pallette.grey700)}
+    size={select('size', IconSize, IconSize.Normal)}
+    marginTop={number('marginTop', 0)}
+    marginRight={number('marginRight', 0)}
+    marginBottom={number('marginBottom', 0)}
+    marginLeft={number('marginLeft', 0)}
+  />
+)
+
+export const WithText = () => (
+  <h1>
+    <Icon
+      name={select('name', iconList, 'zoyi') as IconName}
+      color={color('color', Pallette.grey700)}
+      size={select('size', IconSize, IconSize.Normal)}
+      marginTop={number('marginTop', 0)}
+      marginRight={number('marginRight', 0)}
+      marginBottom={number('marginBottom', 0)}
+      marginLeft={number('marginLeft', 0)}
+    />
+    Hello World!
+  </h1>
+)

src/components/Icon/Icon.styled.ts

@@ -0,0 +1,21 @@
+/* External dependencies */
+import styled from 'styled-components'
+
+/* Internal dependencies */
+import { IconStyledProps } from './Icon.types'
+
+function getMargin({
+  marginTop,
+  marginRight,
+  marginBottom,
+  marginLeft,
+}: IconStyledProps): string {
+  return `${marginTop}px ${marginRight}px ${marginBottom}px ${marginLeft}px`
+}
+
+const Icon = styled.svg<IconStyledProps>`
+  fill: ${props => props.color || props.theme?.colors?.iconBase};
+  margin: ${getMargin};
+`
+
+export default Icon

src/components/Icon/Icon.tsx

@@ -0,0 +1,36 @@
+/* External dependencies */
+import React, { memo } from 'react'
+
+/* Internal dependencies */
+import IconProps, { IconSize } from './Icon.types'
+import icons from './generated'
+import Styled from './Icon.styled'
+
+function Icon({
+  className,
+  style,
+  name,
+  color,
+  size = IconSize.Normal,
+  marginTop = 0,
+  marginRight = 0,
+  marginBottom = 0,
+  marginLeft = 0,
+}: IconProps) {
+  return (
+    <Styled
+      className={className}
+      color={color}
+      as={icons[name]}
+      width={size}
+      height={size}
+      style={style}
+      marginTop={marginTop}
+      marginRight={marginRight}
+      marginBottom={marginBottom}
+      marginLeft={marginLeft}
+    />
+  )
+}
+
+export default memo(Icon)

src/components/Icon/Icon.types.ts

@@ -0,0 +1,29 @@
+/* Internal dependencies */
+import { StylableComponentProps } from '../../types/ComponentProps'
+import { IconName } from './generated'
+
+export enum IconSize {
+  L = 34,
+  Normal = 24,
+  S = 20,
+  XS = 16,
+  XXS = 12,
+}
+
+export interface IconStyledProps {
+  color?: string
+  marginTop: number
+  marginRight: number
+  marginBottom: number
+  marginLeft: number
+}
+
+export default interface IconProps extends StylableComponentProps {
+  name: IconName
+  color?: string
+  size?: IconSize
+  marginTop?: number
+  marginRight?: number
+  marginBottom?: number
+  marginLeft?: number
+}