From 7052e228da7e96bbab1b5510ebed0f6de27d68ff Mon Sep 17 00:00:00 2001 From: liudianxin Date: Mon, 27 Apr 2020 11:11:02 +0800 Subject: [PATCH] =?UTF-8?q?=E5=8A=A8=E6=80=81=E5=9B=BE=E6=A0=87=E7=A4=BA?= =?UTF-8?q?=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/svgIcon.vue | 43 ++++++++++++++++++++++++ src/icons/index.js | 9 +++++ src/icons/svg/ic_2.svg | 1 + src/icons/svg/ic_3.svg | 1 + src/main.js | 2 ++ src/pages/example_code.vue | 2 +- src/pages/example_icon.vue | 67 ++++++++++++++++++++++++++++++++++++++ src/router/index.js | 5 +++ yarn.lock | 39 ++++++++++++++++------ 10 files changed, 159 insertions(+), 12 deletions(-) create mode 100644 src/components/svgIcon.vue create mode 100644 src/icons/index.js create mode 100644 src/icons/svg/ic_2.svg create mode 100644 src/icons/svg/ic_3.svg create mode 100644 src/pages/example_icon.vue diff --git a/package.json b/package.json index 243fa01..53e7cd4 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 0000000..264dca2 --- /dev/null +++ b/src/components/svgIcon.vue @@ -0,0 +1,43 @@ + + + + + \ No newline at end of file diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 0000000..cda29f1 --- /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 0000000..8982d60 --- /dev/null +++ b/src/icons/svg/ic_2.svg @@ -0,0 +1 @@ +ic_画板 2 \ 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 0000000..344cb85 --- /dev/null +++ b/src/icons/svg/ic_3.svg @@ -0,0 +1 @@ +ic_画板 3 \ No newline at end of file diff --git a/src/main.js b/src/main.js index 2a59029..556833a 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 528e924..3dd8363 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; } \ 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 0000000..43a003a --- /dev/null +++ b/src/pages/example_icon.vue @@ -0,0 +1,67 @@ + + + + + \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js index 5ebeac7..a34d691 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 e0ca5aa..e66b3d7 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: -- 2.26.0