From 97570fa6123687d930e2ca48d8a3fce5b0ced020 Mon Sep 17 00:00:00 2001 From: Pan Date: Tue, 29 Aug 2017 16:28:28 +0800 Subject: [PATCH] refactor icons --- build/webpack.base.conf.js | 9 +++++++++ package.json | 1 + src/assets/iconfont/iconfont.js | 1 - src/icons/index.js | 10 ++++++++++ src/icons/svg/404.svg | 1 + src/icons/svg/EXCEL.svg | 1 + src/icons/svg/QQ.svg | 1 + src/icons/svg/a.svg | 1 + src/icons/svg/b.svg | 1 + src/icons/svg/bug.svg | 1 + src/icons/svg/c.svg | 1 + src/icons/svg/email.svg | 1 + src/icons/svg/from.svg | 1 + src/icons/svg/mima.svg | 1 + src/icons/svg/quanxian.svg | 1 + src/icons/svg/shouce.svg | 1 + src/icons/svg/tab.svg | 1 + src/icons/svg/table.svg | 1 + src/icons/svg/theme.svg | 1 + src/icons/svg/tubiao.svg | 1 + src/icons/svg/tuozhuai.svg | 1 + src/icons/svg/weixin.svg | 1 + src/icons/svg/wujiaoxing.svg | 1 + src/icons/svg/xinrenzhinan.svg | 1 + src/icons/svg/yanjing.svg | 1 + src/icons/svg/yonghuming.svg | 1 + src/icons/svg/zonghe.svg | 1 + src/icons/svg/zujian.svg | 1 + src/main.js | 7 ++----- src/router/index.js | 8 ++++---- 30 files changed, 50 insertions(+), 10 deletions(-) delete mode 100644 src/assets/iconfont/iconfont.js create mode 100644 src/icons/index.js create mode 100644 src/icons/svg/404.svg create mode 100644 src/icons/svg/EXCEL.svg create mode 100644 src/icons/svg/QQ.svg create mode 100644 src/icons/svg/a.svg create mode 100644 src/icons/svg/b.svg create mode 100644 src/icons/svg/bug.svg create mode 100644 src/icons/svg/c.svg create mode 100644 src/icons/svg/email.svg create mode 100644 src/icons/svg/from.svg create mode 100644 src/icons/svg/mima.svg create mode 100644 src/icons/svg/quanxian.svg create mode 100644 src/icons/svg/shouce.svg create mode 100644 src/icons/svg/tab.svg create mode 100644 src/icons/svg/table.svg create mode 100644 src/icons/svg/theme.svg create mode 100644 src/icons/svg/tubiao.svg create mode 100644 src/icons/svg/tuozhuai.svg create mode 100644 src/icons/svg/weixin.svg create mode 100644 src/icons/svg/wujiaoxing.svg create mode 100644 src/icons/svg/xinrenzhinan.svg create mode 100644 src/icons/svg/yanjing.svg create mode 100644 src/icons/svg/yonghuming.svg create mode 100644 src/icons/svg/zonghe.svg create mode 100644 src/icons/svg/zujian.svg diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js index 77a31f5f..bbf6c681 100644 --- a/build/webpack.base.conf.js +++ b/build/webpack.base.conf.js @@ -56,9 +56,18 @@ module.exports = { loader: 'babel-loader?cacheDirectory', include: [resolve('src'), resolve('test')] }, + { + test: /\.svg$/, + loader: 'svg-sprite-loader', + include: [resolve('src/icons')], + options: { + symbolId: 'icon-[name]' + } + }, { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', + exclude: [resolve('src/icons')], query: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') diff --git a/package.json b/package.json index c29e8257..ff7d21cb 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "script-loader": "0.7.0", "semver": "5.3.0", "style-loader": "0.17.0", + "svg-sprite-loader": "3.2.4", "url-loader": "0.5.8", "vue-loader": "13.0.4", "vue-style-loader": "3.0.1", diff --git a/src/assets/iconfont/iconfont.js b/src/assets/iconfont/iconfont.js deleted file mode 100644 index 927b19d7..00000000 --- a/src/assets/iconfont/iconfont.js +++ /dev/null @@ -1 +0,0 @@ -(function(window){var svgSprite=""+""+''+""+''+""+""+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+''+""+""+""+''+""+''+""+''+""+''+""+''+""+""+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+''+""+''+""+""+""+"";var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) \ No newline at end of file diff --git a/src/icons/index.js b/src/icons/index.js new file mode 100644 index 00000000..5b20f849 --- /dev/null +++ b/src/icons/index.js @@ -0,0 +1,10 @@ +import Vue from 'vue' +import IconSvg from '@/components/Icon-svg'// svg组件 + +// register globally +Vue.component('icon-svg', IconSvg) +const requireAll = requireContext => requireContext.keys().map(requireContext) +const req = require.context('./svg', false, /\.svg$/) + +requireAll(req) + diff --git a/src/icons/svg/404.svg b/src/icons/svg/404.svg new file mode 100644 index 00000000..bc5bc9fa --- /dev/null +++ b/src/icons/svg/404.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/EXCEL.svg b/src/icons/svg/EXCEL.svg new file mode 100644 index 00000000..e5dd5cec --- /dev/null +++ b/src/icons/svg/EXCEL.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/QQ.svg b/src/icons/svg/QQ.svg new file mode 100644 index 00000000..97aee717 --- /dev/null +++ b/src/icons/svg/QQ.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/a.svg b/src/icons/svg/a.svg new file mode 100644 index 00000000..6297fe8a --- /dev/null +++ b/src/icons/svg/a.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/b.svg b/src/icons/svg/b.svg new file mode 100644 index 00000000..0c08ff08 --- /dev/null +++ b/src/icons/svg/b.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/bug.svg b/src/icons/svg/bug.svg new file mode 100644 index 00000000..a12a9394 --- /dev/null +++ b/src/icons/svg/bug.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/c.svg b/src/icons/svg/c.svg new file mode 100644 index 00000000..17124d90 --- /dev/null +++ b/src/icons/svg/c.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/email.svg b/src/icons/svg/email.svg new file mode 100644 index 00000000..8a87e147 --- /dev/null +++ b/src/icons/svg/email.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/from.svg b/src/icons/svg/from.svg new file mode 100644 index 00000000..7a4bd166 --- /dev/null +++ b/src/icons/svg/from.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/mima.svg b/src/icons/svg/mima.svg new file mode 100644 index 00000000..920b500b --- /dev/null +++ b/src/icons/svg/mima.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/quanxian.svg b/src/icons/svg/quanxian.svg new file mode 100644 index 00000000..37c60701 --- /dev/null +++ b/src/icons/svg/quanxian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/shouce.svg b/src/icons/svg/shouce.svg new file mode 100644 index 00000000..94c68bb6 --- /dev/null +++ b/src/icons/svg/shouce.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/tab.svg b/src/icons/svg/tab.svg new file mode 100644 index 00000000..657057df --- /dev/null +++ b/src/icons/svg/tab.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/table.svg b/src/icons/svg/table.svg new file mode 100644 index 00000000..083bc8cc --- /dev/null +++ b/src/icons/svg/table.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/theme.svg b/src/icons/svg/theme.svg new file mode 100644 index 00000000..9c0873c1 --- /dev/null +++ b/src/icons/svg/theme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/tubiao.svg b/src/icons/svg/tubiao.svg new file mode 100644 index 00000000..b1b31336 --- /dev/null +++ b/src/icons/svg/tubiao.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/tuozhuai.svg b/src/icons/svg/tuozhuai.svg new file mode 100644 index 00000000..819c8d50 --- /dev/null +++ b/src/icons/svg/tuozhuai.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/weixin.svg b/src/icons/svg/weixin.svg new file mode 100644 index 00000000..d88a64bc --- /dev/null +++ b/src/icons/svg/weixin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/wujiaoxing.svg b/src/icons/svg/wujiaoxing.svg new file mode 100644 index 00000000..685a301d --- /dev/null +++ b/src/icons/svg/wujiaoxing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/xinrenzhinan.svg b/src/icons/svg/xinrenzhinan.svg new file mode 100644 index 00000000..3985ab51 --- /dev/null +++ b/src/icons/svg/xinrenzhinan.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/yanjing.svg b/src/icons/svg/yanjing.svg new file mode 100644 index 00000000..194aa45c --- /dev/null +++ b/src/icons/svg/yanjing.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/yonghuming.svg b/src/icons/svg/yonghuming.svg new file mode 100644 index 00000000..5971deeb --- /dev/null +++ b/src/icons/svg/yonghuming.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/zonghe.svg b/src/icons/svg/zonghe.svg new file mode 100644 index 00000000..681422ea --- /dev/null +++ b/src/icons/svg/zonghe.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/icons/svg/zujian.svg b/src/icons/svg/zujian.svg new file mode 100644 index 00000000..d183e56c --- /dev/null +++ b/src/icons/svg/zujian.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 08c499a7..73bad1c5 100644 --- a/src/main.js +++ b/src/main.js @@ -4,15 +4,12 @@ import 'element-ui/lib/theme-default/index.css' import App from './App' import router from './router' import store from './store' -import '@/assets/iconfont/iconfont' // iconfont 具体图标见wiki -import IconSvg from '@/components/Icon-svg'// svg组件 import * as filters from '@/filters' // 全局filter +import '@/icons' // icon import '@/errorLog'// error log import '@/permission' // 权限 -import '@/mock/index.js' // 该项目所有请求使用mockjs模拟 +import '@/mock' // 该项目所有请求使用mockjs模拟 -// register globally -Vue.component('icon-svg', IconSvg) Vue.use(ElementUI) // register global utility filters. diff --git a/src/router/index.js b/src/router/index.js index 35f823b1..407acc7a 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -81,7 +81,7 @@ export const asyncRouterMap = [ component: Layout, redirect: '/charts/index', name: '图表', - icon: 'tubiaoleixingzhengchang', + icon: 'tubiao', children: [ { path: 'index', component: _import('charts/index'), name: '介绍' }, { path: 'keyboard', component: _import('charts/keyboard'), name: '键盘图表' }, @@ -110,9 +110,9 @@ export const asyncRouterMap = [ { path: 'table', component: _import('example/table/table'), name: '综合table' } ] }, - { path: 'form/edit', icon: 'ziliaoshouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }}, - { path: 'form/create', icon: 'yinhangqia', component: _import('example/form'), name: '创建Form' }, - { path: 'tab/index', icon: 'mobankuangjia', component: _import('example/tab/index'), name: 'Tab' } + { path: 'form/edit', icon: 'shouce', component: _import('example/form'), name: '编辑Form', meta: { isEdit: true }}, + { path: 'form/create', icon: 'from', component: _import('example/form'), name: '创建Form' }, + { path: 'tab/index', icon: 'tab', component: _import('example/tab/index'), name: 'Tab' } ] }, {