增加自定义图标示例页

src/assets/icons/iconfont.css

@@ -1,10 +1,10 @@
 
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1528357971702'); /* IE9*/
-  src: url('iconfont.eot?t=1528357971702#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
-  url('iconfont.ttf?t=1528357971702') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1528357971702#iconfont') format('svg'); /* iOS 4.1- */
+  src: url('iconfont.eot?t=1528361751996'); /* IE9*/
+  src: url('iconfont.eot?t=1528361751996#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+  url('iconfont.ttf?t=1528361751996') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.svg?t=1528361751996#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -19,3 +19,13 @@
 
 .icon-resize-vertical:before { content: "\e7c3"; }
 
+.icon-frown:before { content: "\e77e"; }
+
+.icon-meh:before { content: "\e780"; }
+
+.icon-smile:before { content: "\e783"; }
+
+.icon-man:before { content: "\e7e2"; }
+
+.icon-woman:before { content: "\e7e5"; }
+

src/assets/icons/iconfont.svg

@@ -33,6 +33,21 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     <glyph glyph-name="resize-vertical" unicode="&#59331;" d="M512 896C229.248 896 0 666.752 0 384s229.248-512 512-512 512 229.248 512 512S794.752 896 512 896zM576 192l64 0-128-128-128 128 64 0L448 576l-64 0 128 128 128-128-64 0L576 192z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="frown" unicode="&#59262;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM512 363c-85.5 0-155.6-67.3-160-151.6-0.2-4.6 3.4-8.4 8-8.4h48.1c4.2 0 7.8 3.2 8.1 7.4C420 259.9 461.5 299 512 299s92.1-39.1 95.8-88.6c0.3-4.2 3.9-7.4 8.1-7.4H664c4.6 0 8.2 3.8 8 8.4-4.4 84.3-74.5 151.6-160 151.6z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="meh" unicode="&#59264;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 331H360c-4.4 0-8-3.6-8-8v-48c0-4.4 3.6-8 8-8h304c4.4 0 8 3.6 8 8v48c0 4.4-3.6 8-8 8z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="smile" unicode="&#59267;" d="M336 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM688 475m-48 0a48 48 0 1 1 96 0 48 48 0 1 1-96 0ZM512 832C264.6 832 64 631.4 64 384s200.6-448 448-448 448 200.6 448 448S759.4 832 512 832z m263-711c-34.2-34.2-74-61-118.3-79.8C611 21.8 562.3 12 512 12c-50.3 0-99 9.8-144.8 29.2-44.3 18.7-84.1 45.6-118.3 79.8-34.2 34.2-61 74-79.8 118.3C149.8 285 140 333.7 140 384s9.8 99 29.2 144.8c18.7 44.3 45.6 84.1 79.8 118.3 34.2 34.2 74 61 118.3 79.8C413 746.2 461.7 756 512 756c50.3 0 99-9.8 144.8-29.2 44.3-18.7 84.1-45.6 118.3-79.8 34.2-34.2 61-74 79.8-118.3C874.2 483 884 434.3 884 384s-9.8-99-29.2-144.8c-18.7-44.3-45.6-84.1-79.8-118.2zM664 363h-48.1c-4.2 0-7.8-3.2-8.1-7.4C604 306.1 562.5 267 512 267s-92.1 39.1-95.8 88.6c-0.3 4.2-3.9 7.4-8.1 7.4H360c-4.6 0-8.2-3.8-8-8.4 4.4-84.3 74.5-151.6 160-151.6s155.6 67.3 160 151.6c0.2 4.6-3.4 8.4-8 8.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="man" unicode="&#59362;" d="M874 776H622c-3.3 0-6-2.7-6-6v-56c0-3.3 2.7-6 6-6h160.4L583.1 508.7c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S120 356.9 120 280s30-149.3 84.4-203.6C258.7 22 331.1-8 408-8s149.3 30 203.6 84.4C666 130.7 696 203.1 696 280c0 64.1-20.8 124.9-59.2 174.9L836 654.1V494c0-3.3 2.7-6 6-6h56c3.3 0 6 2.7 6 6V746c0 16.5-13.5 30-30 30zM408 68c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="woman" unicode="&#59365;" d="M909.7 739.4l-42.2 42.2c-3.1 3.1-8.2 3.1-11.3 0L764 689.4l-84.2 84.2c-3.1 3.1-8.2 3.1-11.3 0l-42.1-42.1c-3.1-3.1-3.1-8.1 0-11.3l84.2-84.2-135.5-135.3c-50 38.5-111 59.3-175.1 59.3-76.9 0-149.3-30-203.6-84.4S112 348.9 112 272s30-149.3 84.4-203.6C250.7 14 323.1-16 400-16s149.3 30 203.6 84.4C658 122.7 688 195.1 688 272c0 64.2-20.9 125.1-59.3 175.1l135.4 135.4 84.2-84.2c3.1-3.1 8.2-3.1 11.3 0l42.1 42.1c3.1 3.1 3.1 8.1 0 11.3l-84.2 84.2 92.2 92.2c3.1 3.1 3.1 8.2 0 11.3zM400 60c-116.9 0-212 95.1-212 212s95.1 212 212 212 212-95.1 212-212-95.1-212-212-212z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

src/view/components/icons/icons.vue

@@ -1,13 +1,63 @@
 <template>
-  <div></div>
+  <Row>
+    <i-col span="16">
+      <Row v-for="i in (customIconList.length / 3)" :key="`custom-icon-row-${i}`">
+        <i-col span="8" v-for="item in customIconList.slice((i - 1) * 3, i * 3)" :key="`custom-icon-${item}`">
+          <Card style="margin: 0 5px 5px; text-align: center;">
+            <icons :size="30" :type="item"/>
+            <p class="icon-code">&lt;Icons :size="30" type="{{ item }}"&gt;</p>
+            <p>&lt;CommonIcon :size="30" type="_{{ item }}"&gt;</p>
+          </Card>
+        </i-col>
+      </Row>
+      <Row>
+        <i-col>
+          <Card style="margin: 0 5px 5px; text-align: center;">
+            <common-icon :size="30" type="ionic"/>
+            <p class="icon-code">iView内置图标</p>
+            <p>&lt;CommonIcon :size="30" type="ionic"&gt;</p>
+          </Card>
+        </i-col>
+      </Row>
+    </i-col>
+    <i-col span="8">
+      <Card>
+        <p class="intro-p"><Icon style="margin-right: 10px;" :size="10" type="heart"/>Icons组件支持自定义图标的显示，具体自定义图标字体文件的制作请参考文档。</p>
+        <p class="intro-p"><Icon style="margin-right: 10px;" :size="10" type="heart"/>CommonIcon组件同时支持iView内置图标类型和自定义图标类型，为了区别这两种类型，需要在自定义图标名称前加下划线"_"</p>
+      </Card>
+    </i-col>
+  </Row>
 </template>
 
 <script>
+import Icons from '_c/icons'
+import CommonIcon from '_c/common-icon'
 export default {
-  name: 'icons_pages'
+  name: 'icons_pages',
+  components: {
+    Icons,
+    CommonIcon
+  },
+  data () {
+    return {
+      customIconList: [
+        'woman',
+        'man',
+        'smile',
+        'meh',
+        'frown',
+        'bear'
+      ]
+    }
+  }
 }
 </script>
 
-<style>
-
+<style lang="less">
+.icon-code{
+  margin: 20px 0 10px;
+}
+.intro-p{
+  margin-bottom: 10px;
+}
 </style>