Merge pull request #192 from DaoCloud/feature/svg

feature(dao-svg): add svg

build/webpack.base.config.js

@@ -54,11 +54,7 @@ module.exports = {
         ]
       }, {
         test: /\.svg$/,
-        loader: 'svg-sprite-loader?' + JSON.stringify({
-          name: '[name]',
-          prefixize: true,
-          regExp: '../src/components/dao-svg/**/(.*)\\.svg'
-        }),
+        loader: 'svg-sprite-loader',
       },
       { test: /\.(gif|jpg|png|woff|eot|ttf)\??.*$/, loader: 'url-loader?limit=8192' },
       { test: /\.(html|tpl)$/, loader: 'html-loader' }

examples/app.vue

@@ -78,6 +78,9 @@ li + li {
         <li>
           <router-link to="/steps">Steps</router-link>
         </li>
+        <li>
+          <router-link to="/svg">Svg</router-link>
+        </li>
         <!-- <li>
           <router-link to="/switch">Switch</router-link>
         </li> -->

examples/main.js

@@ -25,6 +25,7 @@ import select from './routers/select.vue';
 import selectAll from './routers/select-all.vue';
 import settingLayout from './routers/setting-layout.vue';
 import steps from './routers/steps.vue';
+import svg from './routers/svg.vue';
 import tab from './routers/tab.vue';
 import table from './routers/table.vue';
 import tooltip from './routers/tooltip.vue';
@@ -88,6 +89,9 @@ const router = new VueRouter({
   }, {
     path: '/steps',
     component: steps,
+  }, {
+    path: '/svg',
+    component: svg,
   }, {
     path: '/tab',
     component: tab,

examples/routers/svg.vue

@@ -0,0 +1,91 @@
+<style lang="scss" scoped>
+  .svg-demo-wrap {
+    margin: 50px auto;
+  }
+
+  .svg-list {
+    zoom: 1;
+
+    &:before,
+    &:after {
+      content: " ";
+      display: table;
+      clear: both;
+    }
+
+    &>li {
+      list-style: none;
+      float: left;
+      width: 120px;
+      height: 90px;
+      padding: 10px;
+      font-size: 10px;
+      line-height: 1.4;
+      text-align: center;
+      background-color: #f9f9f9;
+      border: 1px solid #fff;
+
+      &:hover {
+        color: #fff;
+        background-color: #2ecc71;
+      }
+
+      .icon {
+        display: inline-block;
+        margin-top: 10px;
+        width: 32px;
+        height: 32px;
+
+        svg {
+          max-width: 100%;
+          max-height: 100%;
+        }
+      }
+
+      .icon-id {
+        display: block;
+        word-wrap: break-word;
+      }
+    }
+  }
+</style>
+<template>
+  <div class="svg-demo-wrap">
+    <ul class="svg-list">
+      <li v-for="name in svgs">
+        <span class="icon">
+          <svg>
+            <use :xlink:href="`#${name}`"></use>
+          </svg>
+        </span>
+        <span class="icon-id">
+          {{name}}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>
+<script>
+  export default {
+    data() {
+      return {
+        svgs: [],
+      };
+    },
+    methods: {
+      importAll(svgsRoute) {
+        svgsRoute.keys().forEach((name) => {
+          const nameArr = name.split('/');
+          const len = nameArr.length;
+          const NameString = nameArr[len - 1];
+          const newName = NameString.substring(0, NameString.length - 4);
+          this.svgs.push(newName);
+        });
+      },
+    },
+    created() {
+      const svgsRoute = require.context('@/components/dao-svg', true, /\.svg$/);
+      this.importAll(svgsRoute);
+    },
+  };
+</script>

package.json

@@ -95,7 +95,7 @@
     "sinon": "^1.17.7",
     "sinon-chai": "^2.8.0",
     "style-loader": "^0.13.1",
-    "svg-sprite-loader": "0.0.16",
+    "svg-sprite-loader": "^3.0.5",
     "url-loader": "^0.5.7",
     "vue": "^2.2.1",
     "vue-hot-reload-api": "^1.3.3",

src/components/dao-svg/16px icons/README.txt

@@ -13,3 +13,5 @@ Some easy things to check to make sure your icon set feels consistent:
 - Do they have either relatively similar silhouettes (eg. all contained in circles) or relatively unique silhouettes?
 -
 https://medium.com/shopify-ux/product-vs-marketing-illustration-7ac474dfe2ed#.s1dbo45wy
+
+image-icons will be removed