diff --git a/package.json b/package.json
index 243fa01d01acb820c547a2c126064d5fe3535d39..53e7cd41920bfe8c4431fdadc5cfe396e9482bcf 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
     "json2yaml": "^1.1.0",
     "material-design-icons-iconfont": "^4.0.5",
     "string-format": "^2.0.0",
-    "svg-sprite-loader": "^4.2.1",
+    "svg-sprite-loader": "^4.2.6",
     "vue": "^2.6.10",
     "vue-cropper": "^0.5.2",
     "vue-resource": "^1.5.1",
diff --git a/src/components/svgIcon.vue b/src/components/svgIcon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..264dca2794c5695db21d7d74deaf995de0b9d5f0
--- /dev/null
+++ b/src/components/svgIcon.vue
@@ -0,0 +1,43 @@
+<template>
+ <svg :class="svgClass" aria-hidden="true">
+ <use :xlink:href="iconName"/>
+ </svg>
+</template>
+ 
+<script>
+export default {
+ name: 'SvgIcon',
+ props: {
+ iconClass: {
+  type: String,
+  required: true,
+ },
+ className: {
+  type: String,
+  default: '',
+ },
+ },
+ computed: {
+ iconName () {
+  return `#icon-${this.iconClass}`
+ },
+ svgClass () {
+  if (this.className) {
+  return 'svg-icon ' + this.className
+  } else {
+  return 'svg-icon'
+  }
+ },
+ },
+}
+</script>
+ 
+<style scoped>
+.svg-icon {
+ width: 1em;
+ height: 1em;
+ vertical-align: -0.15em;
+ fill: currentColor;
+ overflow: hidden;
+}
+</style>
\ No newline at end of file
diff --git a/src/icons/index.js b/src/icons/index.js
new file mode 100644
index 0000000000000000000000000000000000000000..cda29f179d338c632eada3561f9c4548e4b4002d
--- /dev/null
+++ b/src/icons/index.js
@@ -0,0 +1,9 @@
+import Vue from 'vue'
+import SvgIcon from '@/components/svgIcon' // svg组件
+ 
+// 注册到全局
+Vue.component('svg-icon', SvgIcon)
+ 
+const requireAll = requireContext => requireContext.keys().map(requireContext)
+const req = require.context('./svg', false, /\.svg$/)
+requireAll(req)
\ No newline at end of file
diff --git a/src/icons/svg/ic_2.svg b/src/icons/svg/ic_2.svg
new file mode 100644
index 0000000000000000000000000000000000000000..8982d609762f33488a3ed7f6e4e561d5d4e6fce7
--- /dev/null
+++ b/src/icons/svg/ic_2.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 819.2 716.8"><title>ic_画板 2</title><path d="M759.36,283.6C725,121.68,581.84,0,409.6,0,303.36,0,208.08,46.32,142.48,119.84a354.83,354.83,0,0,0-24.72,31c-2.24,3.12-15.36,15.52-15.36,28.4,0,14.16,11.44,25.12,25.6,25.6,16.8.56,24.72-14.4,27.52-18.48C210.72,104.88,303.76,51.2,409.6,51.2c146,0,267.68,102.08,298.88,238.64a76.51,76.51,0,1,0,50.88-6.24ZM742.4,384A25.6,25.6,0,1,1,768,358.4,25.57,25.57,0,0,1,742.4,384Z"/><path d="M691.2,512a25.52,25.52,0,0,0-18.08,7.52s-8,9-11.52,14c-55.44,79.76-147.52,132.08-252,132.08-146,0-267.92-101.92-299.2-238.48A76.57,76.57,0,1,0,59,433C93.36,595.12,237.2,716.8,409.6,716.8c119.44,0,225-58.56,290.08-148.4,2.8-3.84,12.16-15.76,13.6-18.16a24.21,24.21,0,0,0,3.52-12.64A25.58,25.58,0,0,0,691.2,512ZM76.8,384a25.6,25.6,0,1,1,25.6-25.6A25.58,25.58,0,0,1,76.8,384Z"/></svg>
\ No newline at end of file
diff --git a/src/icons/svg/ic_3.svg b/src/icons/svg/ic_3.svg
new file mode 100644
index 0000000000000000000000000000000000000000..344cb8552ec1b8a1b5139d29d3f4e7ce33d32126
--- /dev/null
+++ b/src/icons/svg/ic_3.svg
@@ -0,0 +1 @@
+<svg id="图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 255.98 358.35"><title>ic_画板 3</title><path d="M247.44,150.43a37.52,37.52,0,0,0-9.76-11L72.24,9.39C62.4,1.55,50.48-1.57,38.48.75c-12,2-22.48,9-29.76,19.6A49.83,49.83,0,0,0,0,49.31V309.39a49.61,49.61,0,0,0,13.44,34.48c8.72,9.36,19.92,14.48,31.92,14.48a40.69,40.69,0,0,0,26.48-9.44L237.28,219a49.72,49.72,0,0,0,18.16-32.16A53.05,53.05,0,0,0,247.44,150.43Z"/></svg>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 2a59029aaf19c725986924e42506b7e7fe7933d6..556833aa6e74c59c325205aeced62e5b07f7b059 100644
--- a/src/main.js
+++ b/src/main.js
@@ -18,6 +18,8 @@ Vue.use(ElementUI)
 import App from "./App";
 import router from "./router";
 
+import "@/icons"
+
 import "./assets/css/index.css";
 
 new Vue({
diff --git a/src/pages/example_code.vue b/src/pages/example_code.vue
index 528e9245d0ef1e391c913ed72b77ea5e26fc263d..3dd836319aee195ee91e009bbdf6c52bfe24d122 100644
--- a/src/pages/example_code.vue
+++ b/src/pages/example_code.vue
@@ -101,6 +101,6 @@ export default {
   color: #8890a7;
 }
 .code-main {
-    margin-top: 100px;
+  margin-top: 100px;
 }
 </style>
\ No newline at end of file
diff --git a/src/pages/example_icon.vue b/src/pages/example_icon.vue
new file mode 100644
index 0000000000000000000000000000000000000000..43a003a7b3dfdc2f4cf590cfecbe63dac24dc27e
--- /dev/null
+++ b/src/pages/example_icon.vue
@@ -0,0 +1,67 @@
+<template>
+  <div class="icon-main icon_act">
+    <svg-icon icon-class="ic_2" class="svg_out"></svg-icon>
+    <svg-icon icon-class="ic_3" class="svg_in"></svg-icon>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {};
+  },
+  components: {},
+  mounted: function() {
+    // this.init();
+  },
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style scoped>
+.icon-main {
+  margin-top: 100px;
+}
+.icon_act {
+  margin-left: 50px;
+  position: relative;
+}
+.svg_out {
+  font-size: 100px;
+  color: lawngreen;
+  animation: out_t;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+.svg_in {
+  font-size: 50px;
+  position: absolute;
+  top: 25px;
+  left: 26px;
+  animation: in_t;
+  animation-duration: 2s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+@keyframes out_t {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+@keyframes in_t {
+  0% {
+    color: lightcoral;
+  }
+  50% {
+    color: #7cd21a;
+  }
+  100% {
+    color: lightcoral;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 5ebeac7620a621a88ac42e0cc0e836826197f8bf..a34d691d5bfa9edd9e3fe0c25f1cfd1e2ad3a014 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -50,6 +50,11 @@ export default new Router({
       path: "/example_code", // 编辑器实例
       name: "example_code",
       component: () => import("@/pages/example_code")
+    },
+    {
+      path: "/example_icon", // svg 实例
+      name: "example_icon",
+      component: () => import("@/pages/example_icon")
     }
   ]
 });
diff --git a/yarn.lock b/yarn.lock
index e0ca5aa8d32c4d59af1fe7949294857c0fe149be..e66b3d7bb57b46a22e77403d8b84519e72cebaf0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6438,14 +6438,14 @@ supports-color@^5.3.0:
   dependencies:
     has-flag "^3.0.0"
 
-svg-baker-runtime@^1.4.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.3.tgz#8ec035daf3af4abe7e788120868ebbf84a34468f"
-  integrity sha512-QY6RlJN3v6xPxVQboSrsGiLWaWay+uFstic6QEzoIUK2l6M/lqL/wiqFcoqroBsGpqpP0knXplltLZGTzncbNw==
+svg-baker-runtime@^1.4.6:
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/svg-baker-runtime/-/svg-baker-runtime-1.4.6.tgz#73499736c636610121a9e17ae6ceb2ea1023ec6b"
+  integrity sha512-n+Uq23mafI12WLHXahkjSY00qHJaNfeB9XgVKdo0C4kzrcn8JnunXNajvOlqkFaTqj7xT7MwTlFl3Hga8AevcQ==
   dependencies:
     deepmerge "1.3.2"
     mitt "1.1.2"
-    svg-baker "^1.5.0"
+    svg-baker "^1.7.0"
 
 svg-baker@^1.5.0:
   version "1.5.0"
@@ -6466,10 +6466,29 @@ svg-baker@^1.5.0:
     query-string "^4.3.2"
     traverse "^0.6.6"
 
-svg-sprite-loader@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/svg-sprite-loader/-/svg-sprite-loader-4.2.1.tgz#38a0bb9af9beecd037a0e417af56edf670fe7283"
-  integrity sha512-IQCJEHWD+CNP8yFptR2SkscLXBgwYwY+34VMNSLBE4RQmJ0dgpAfkF6q8ktgNsXlMhlX6cAM4Zw0t7SnLyyiQA==
+svg-baker@^1.7.0:
+  version "1.7.0"
+  resolved "https://registry.yarnpkg.com/svg-baker/-/svg-baker-1.7.0.tgz#8367f78d875550c52fe4756f7303d5c5d7c2e9a7"
+  integrity sha512-nibslMbkXOIkqKVrfcncwha45f97fGuAOn1G99YwnwTj8kF9YiM6XexPcUso97NxOm6GsP0SIvYVIosBis1xLg==
+  dependencies:
+    bluebird "^3.5.0"
+    clone "^2.1.1"
+    he "^1.1.1"
+    image-size "^0.5.1"
+    loader-utils "^1.1.0"
+    merge-options "1.0.1"
+    micromatch "3.1.0"
+    postcss "^5.2.17"
+    postcss-prefix-selector "^1.6.0"
+    posthtml-rename-id "^1.0"
+    posthtml-svg-mode "^1.0.3"
+    query-string "^4.3.2"
+    traverse "^0.6.6"
+
+svg-sprite-loader@^4.2.6:
+  version "4.2.6"
+  resolved "https://registry.yarnpkg.com/svg-sprite-loader/-/svg-sprite-loader-4.2.6.tgz#9f5ac6d75d78be80758966abc4210a285edb2073"
+  integrity sha512-NwHOcULhpKLGwQawunpcp9RmUCHbboWO94x7n8DNFHIwxYfsuvcS6s/mPCBbqLS+C9ox0F6BZZI/2vbW0RXMlQ==
   dependencies:
     bluebird "^3.5.0"
     deepmerge "1.3.2"
@@ -6478,7 +6497,7 @@ svg-sprite-loader@^4.2.1:
     html-webpack-plugin "^3.2.0"
     loader-utils "^1.1.0"
     svg-baker "^1.5.0"
-    svg-baker-runtime "^1.4.3"
+    svg-baker-runtime "^1.4.6"
     url-slug "2.0.0"
 
 svgo@^1.0.0: