feat(icon): add icon component

packages/element-plus/index.ts

@@ -9,6 +9,7 @@ import ElDivider from '@element-plus/divider'
 import ElTimeLine from '@element-plus/time-line'
 import ElProgress from '@element-plus/progress'
 import ElBreadcrumb from '@element-plus/breadcrumb'
+import ElIcon from '@element-plus/icon'
 
 export {
   ElAvatar,
@@ -21,6 +22,7 @@ export {
   ElTimeLine,
   ElProgress,
   ElBreadcrumb,
+  ElIcon,
 }
 
 export default function install(app: App): void {
@@ -34,4 +36,5 @@ export default function install(app: App): void {
   ElTimeLine(app)
   ElProgress(app)
   ElBreadcrumb(app)
+  ElIcon(app)
 }

packages/element-plus/package.json

@@ -23,6 +23,7 @@
     "@element-plus/time-line": "^0.0.0",
     "@element-plus/divider": "^0.0.0",
     "@element-plus/progress": "^0.0.0",
-    "@element-plus/breadcrumb": "^0.0.0"
+    "@element-plus/breadcrumb": "^0.0.0",
+    "@element-plus/icon": "^0.0.0"
   }
 }

packages/icon/__tests__/icon.spec.ts

@@ -0,0 +1,13 @@
+import { mount } from '@vue/test-utils'
+import Icon from '../src/index.vue'
+
+describe('Icon.vue', () => {
+  test('render', () => {
+    const wrapper = mount(Icon, {
+      props: {
+        name: 'search',
+      },
+    })
+    expect(wrapper.classes()).toContain('el-icon-search')
+  })
+})

packages/icon/doc/basic.vue

@@ -0,0 +1,14 @@
+<template>
+  <el-icon name="edit" />
+  <el-icon name="share" />
+  <el-icon name="delete" />
+</template>
+
+<style scoped>
+  i {
+    color: #606266;
+    margin: 0 20px;
+    font-size: 1.5em;
+    vertical-align: middle;
+  }
+</style>

packages/icon/doc/index.stories.ts

@@ -0,0 +1,5 @@
+export { default as BasicUsage } from './basic.vue'
+
+export default {
+  title: 'Icon',
+}

packages/icon/index.ts

@@ -0,0 +1,5 @@
+import { App } from 'vue'
+import Icon from './src/index.vue'
+export default (app: App): void => {
+  app.component(Icon.name, Icon)
+}

packages/icon/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@element-plus/icon",
+  "version": "0.0.0",
+  "main": "dist/index.js",
+  "license": "MIT",
+  "peerDependencies": {
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "@vue/test-utils": "^2.0.0-beta.0"
+  }
+}

packages/icon/src/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <i :class="`el-icon-${name}`"></i>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent({
+  name: 'ElIcon',
+  props: {
+    name: {
+      type: String,
+      default: '',
+    },
+  },
+})
+</script>