diff --git a/src/pages/demo/components/icon/svg.vue b/src/pages/demo/components/icon/svg.vue
index 82b0d455..cd24bf0c 100644
--- a/src/pages/demo/components/icon/svg.vue
+++ b/src/pages/demo/components/icon/svg.vue
@@ -1,17 +1,22 @@
 <template>
-  <Container>
-    <PageHeader
-      slot="header"
-      title="SVG图标组件">
-    </PageHeader>
-    <el-row>
-      <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
-        <IconSvg class="icon" :name="icon"></IconSvg>
-        <div class="icon-title">
-          <span>{{icon}}</span>
-        </div>
-      </el-col>
-    </el-row>
+  <Container type="ghost">
+    <el-card class="dd-mb">
+      <PageHeader
+        slot="header"
+        title="SVG图标组件">
+      </PageHeader>
+      <el-row>
+        <el-col class="icon-card" :span="4" v-for="(icon, index) in $IconSvg" :key="index">
+          <IconSvg class="icon" :name="icon"></IconSvg>
+          <div class="icon-title">
+            <span>{{icon}}</span>
+          </div>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card>
+      <Markdown url="/static/markdownFiles/article/组件 - 图标组件.md"></Markdown>
+    </el-card>
   </Container>
 </template>
 
@@ -23,16 +28,23 @@
   align-items: center;
   flex-direction: column;
   height: 150px;
+  &:hover {
+    .icon {
+      transform: scale(1.1);
+    }
+    .icon-title {
+      color: $color-text-main;
+    }
+  }
 }
 .icon {
   height: 80px;
   width: 80px;
+  transition: all .3s;
 }
 .icon-title {
   font-size: 12px;
   margin-top: 10px;
-  span {
-    color: $color-text-sub;
-  }
+  color: $color-text-placehoder;
 }
 </style>
diff --git a/static/markdownFiles/article/组件 - 图标组件 - svg.md b/static/markdownFiles/article/组件 - 图标组件 - svg.md
new file mode 100644
index 00000000..fa2cdb23
--- /dev/null
+++ b/static/markdownFiles/article/组件 - 图标组件 - svg.md	
@@ -0,0 +1,35 @@
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
+
+## 使用方法
+
+基本
+
+```
+// 这样用没有毛病 但是也没什么用
+<Icon></Icon>
+
+// 指定图标名称
+<Icon name="github"></Icon>
+
+// 设置行内样式
+<Icon name="github" style="font-size: 100px;"></Icon>
+
+// 设置 class
+<Icon name="github" class="icon-class-demo"></Icon>
+```
+
+这个组件只是简化了写法而已
+
+```
+<Icon name="github"></Icon>
+// 等同于
+<i class="fa fa-github" aria-hidden="true"></i>
+```
+
+## 参考
+
+演示图表来源 [http://iconfont.cn/ @小啊小二饼 《2.5D工作日记》](http://iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.d9df05512&cid=8219)
\ No newline at end of file