[#639][3.0] Icon 컴포넌트

###########
- 컴포넌트 및 샘플 문서 작성
- 기타 코드 개선

docs/App.vue

@@ -51,7 +51,7 @@ export default {
   @import './style/lib/highlightjs.github';
 }
 .hljs {
-  * {
+  &, * {
     font-size: 14px;
     font-family: consolas, monospace;
   }

docs/components/Example.vue

@@ -177,9 +177,9 @@ export default {
     position: relative;
     width: 50%;
     max-width: 700px;
+    overflow: hidden;
     .code-wrapper {
-      height: 400px;
-      overflow-y: hidden;
+      height: 50px;
     }
     .btn-show-more {
       position: absolute;

docs/components/Menu.vue

@@ -45,9 +45,9 @@ export default {
         content: '체크박스',
       },
       {
-        name: 'RadioButton',
+        name: 'Radio',
         routerLink: '/radio',
-        content: '라디오버튼',
+        content: '라디오',
       },
       {
         name: 'InputNumber',
@@ -124,6 +124,11 @@ export default {
         routerLink: '/reactivityChart',
         content: '실시간 차트',
       },
+      {
+        name: 'Icon',
+        routerLink: '/icon',
+        content: '아이콘',
+      },
     ];
 
     const clickMenu = (routerLink) => {

docs/router/index.js

@@ -107,6 +107,11 @@ const routes = [
     name: 'ReactivityChart',
     component: () => import(/* webpackChunkName: "reactivityChart" */ '../views/reactivityChart'),
   },
+  {
+    path: '/icon',
+    name: 'Icon',
+    component: () => import(/* webpackChunkName: "icon" */ '../views/icon/index'),
+  },
   {
     path: '/:catchAll(.*)',
     name: 'PageNotFound',

docs/views/checkbox/example/Default.vue

@@ -53,8 +53,6 @@
         toggle to disable
       </button>
     </div>
-    <br>
-    <br>
   </div>
 </template>
 

docs/views/icon/api/icon.md

@@ -0,0 +1,21 @@
+### Desc
+- 태그는 &lt;EvIcon&gt;(이하 <아이콘>)으로 정의
+
+```
+<EvIcon icon="아이콘명" />
+```
+
+### Props
+
+|    이름     |   디폴트   |  타입   |          설명            |                    종류                           |
+|------------ |-----------|---------|-------------------------|---------------------------------------------------|
+| icon     | ''      | String | EVUI에서 제공하는 아이콘 클래스명 | |
+| size     | ''      | String | 아이콘 | s, m, l |
+
+### Event
+
+ | 이름 | 파라미터 | 설명 |
+ | ---- | ------- | ---- |
+ | click | event | 클릭 이벤트 감지 |
+ | dblClick | event | 더블 클릭 이벤트 감지 |
+ | contextmenu | event | 컨텍스트메뉴(우클릭) 이벤트 감지 |

docs/views/icon/example/Default.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="case">
+    <p class="case-title">Size</p>
+    <div style="font-size: 40px;">
+      <EvIcon icon="ev-icon-user" />
+      <EvIcon icon="ev-icon-topology" />
+      <i class="ev-icon-server"/>
+    </div>
+    <div class="description">
+      font-size 지정하여 크기 변경
+    </div>
+    <div>
+      <EvIcon
+        icon="ev-icon-user2"
+        size="s"
+      />
+      <EvIcon
+        icon="ev-icon-user2"
+        size="m"
+      />
+      <EvIcon
+        icon="ev-icon-user2"
+        size="l"
+      />
+    </div>
+    <div class="description">
+      size 변수(s, m, l) 바인딩
+    </div>
+  </div>
+  <div class="case">
+    <p class="case-title">Event</p>
+    <div style="font-size: 40px;">
+      <EvIcon
+        icon="ev-icon-save"
+        @click="clickIcon"
+        @dblClick="dblClickIcon"
+        @contextmenu="contextMenuIcon"
+      />
+    </div>
+    <div class="description">
+      <span class="badge">
+        Click Event Name
+      </span>
+      {{ eventText }}
+    </div>
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+
+export default {
+  setup() {
+    const eventText = ref('No event occurred');
+    const clickIcon = (e) => {
+      eventText.value = e.type;
+    };
+    const dblClickIcon = (e) => {
+      eventText.value = e.type;
+    };
+    const contextMenuIcon = (e) => {
+      eventText.value = e.type;
+    };
+    return {
+      eventText,
+      clickIcon,
+      dblClickIcon,
+      contextMenuIcon,
+    };
+  },
+};
+</script>
+
+<style lang="scss">
+</style>