'添加自定义图标'

README.md

@@ -1,4 +1,4 @@
-# manage-system #
+# vue-manage-system #
 基于Vue.js 2.x系列 + Element UI 的后台管理系统解决方案。[线上地址](http://blog.gdfengshuo.com/example/work/)
 
 [English document](https://github.com/lin-xin/manage-system/blob/master/README_EN.md)
@@ -31,6 +31,7 @@
 - [x] 权限测试
 - [x] 404 / 403
 - [x] 三级菜单
+- [x] 自定义图标
 
 
 ## 目录结构介绍 ##
@@ -53,6 +54,7 @@
 	|           |-- BaseTable.vue        // 基础表格
 	|           |-- DashBoard.vue        // 系统首页
 	|           |-- DragList.vue         // 拖拽列表组件
+	|           |-- Icon.vue			 // 自定义图标组件
 	|           |-- Login.vue          	 // 登录
 	|           |-- Markdown.vue         // markdown组件
 	|           |-- Premission.vue       // 权限测试组件

README_EN.md

@@ -1,4 +1,4 @@
-# manage-system #
+# vue-manage-system #
 The web management system solution based on Vue2 and Element-UI。[live demo](http://blog.gdfengshuo.com/example/work/)
 
 ## Donation
@@ -22,6 +22,8 @@ The scheme as a set of multi-function background frame templates, suitable for m
 - [x] List drag sort
 - [x] Permission
 - [x] 404 / 403
+- [x] Three level menu
+- [x] Custom icon
 
 
 ## Directory structure ##

src/App.vue

@@ -4,6 +4,7 @@
     </div>
 </template>
 <style>
+    @import 'http://at.alicdn.com/t/font_830376_95kzqdmphss.css';
     @import "../static/css/main.css";
     @import "../static/css/color-dark.css";     /*深色主题*/
     /*@import "../static/css/theme-green/color-green.css";   浅绿色主题*/

src/components/common/Sidebar.vue

@@ -39,22 +39,22 @@
                 collapse: false,
                 items: [
                     {
-                        icon: 'el-icon-setting',
+                        icon: 'el-icon-lx-home',
                         index: 'dashboard',
                         title: '系统首页'
                     },
                     {
-                        icon: 'el-icon-tickets',
+                        icon: 'el-icon-lx-cascades',
                         index: 'table',
                         title: '基础表格'
                     },
                     {
-                        icon: 'el-icon-message',
+                        icon: 'el-icon-lx-copy',
                         index: 'tabs',
                         title: 'tab选项卡'
                     },
                     {
-                        icon: 'el-icon-date',
+                        icon: 'el-icon-lx-calendar',
                         index: '3',
                         title: '表单相关',
                         subs: [
@@ -83,7 +83,12 @@
                         ]
                     },
                     {
-                        icon: 'el-icon-star-on',
+                        icon: 'el-icon-lx-emoji',
+                        index: 'icon',
+                        title: '自定义图标'
+                    },
+                    {
+                        icon: 'el-icon-lx-favor',
                         index: 'charts',
                         title: 'schart图表'
                     },
@@ -93,7 +98,7 @@
                         title: '拖拽列表'
                     },
                     {
-                        icon: 'el-icon-error',
+                        icon: 'el-icon-lx-warn',
                         index: '6',
                         title: '错误处理',
                         subs: [

src/components/page/Dashboard.vue

@@ -36,7 +36,7 @@
                     <el-col :span="8">
                         <el-card shadow="hover" :body-style="{padding: '0px'}">
                             <div class="grid-content grid-con-1">
-                                <i class="el-icon-view grid-con-icon"></i>
+                                <i class="el-icon-lx-people grid-con-icon"></i>
                                 <div class="grid-cont-right">
                                     <div class="grid-num">1234</div>
                                     <div>用户访问量</div>
@@ -47,7 +47,7 @@
                     <el-col :span="8">
                         <el-card shadow="hover" :body-style="{padding: '0px'}">
                             <div class="grid-content grid-con-2">
-                                <i class="el-icon-message grid-con-icon"></i>
+                                <i class="el-icon-lx-notice grid-con-icon"></i>
                                 <div class="grid-cont-right">
                                     <div class="grid-num">321</div>
                                     <div>系统消息</div>
@@ -58,7 +58,7 @@
                     <el-col :span="8">
                         <el-card shadow="hover" :body-style="{padding: '0px'}">
                             <div class="grid-content grid-con-3">
-                                <i class="el-icon-goods grid-con-icon"></i>
+                                <i class="el-icon-lx-goods grid-con-icon"></i>
                                 <div class="grid-cont-right">
                                     <div class="grid-num">5000</div>
                                     <div>数量</div>

src/components/page/Icon.vue

@@ -0,0 +1,166 @@
+<template>
+    <div>
+        <div class="crumbs">
+            <el-breadcrumb separator="/">
+                <el-breadcrumb-item><i class="el-icon-warning"></i> 自定义图标</el-breadcrumb-item>
+            </el-breadcrumb>
+        </div>
+        <div class="container">
+            <h2>使用方法</h2>
+            <p>
+                直接通过设置类名为 el-icon-lx-iconName 来使用即可。例如：
+            </p>
+            <p class="example-p">
+                <i class="el-icon-lx-delete" style="font-size: 30px;"></i>
+                <span>&lt;i class=&quot;el-icon-lx-delete&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <p class="example-p">
+                <i class="el-icon-lx-weibo" style="font-size: 30px;color: red"></i>
+                <span>&lt;i class=&quot;el-icon-lx-weibo&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <p class="example-p">
+                <i class="el-icon-lx-favorfill" style="font-size: 30px;color: #ffc300"></i>
+                <span>&lt;i class=&quot;el-icon-lx-favorfill&quot;&gt;&lt;/i&gt;</span>
+            </p>
+            <br>
+            <h2>图标</h2>
+            <div class="search-box">
+                <el-input class="search" size="large" v-model="keyword" clearable placeholder="请输入图标名称"></el-input>
+            </div>
+            <ul>
+                <li class="icon-li" v-for="(item,index) in list" :key="index">
+                    <div class="icon-li-content">
+                        <i :class="`el-icon-lx-${item}`"></i>
+                        <span>{{item}}</span>
+                    </div>
+                </li>
+            </ul>
+        </div>
+
+    </div>
+</template>
+
+<script>
+    export default {
+        data: function(){
+            return {
+                keyword: '',
+                iconList: [
+                    'attentionforbid',
+                    'attentionforbidfill',
+                    'attention',
+                    'attentionfill',
+                    'tag',
+                    'tagfill',
+                    'people',
+                    'peoplefill',
+                    'notice',
+                    'noticefill',
+                    'mobile',
+                    'mobilefill',
+                    'voice',
+                    'voicefill',
+                    'unlock',
+                    'lock',
+                    'home',
+                    'homefill',
+                    'delete',
+                    'deletefill',
+                    'notification',
+                    'notificationfill',
+                    'notificationforbidfill',
+                    'like',
+                    'likefill',
+                    'comment',
+                    'commentfill',
+                    'camera',
+                    'camerafill',
+                    'warn',
+                    'warnfill',
+                    'time',
+                    'timefill',
+                    'location',
+                    'locationfill',
+                    'favor',
+                    'favorfill',
+                    'full',
+                    'text',
+                    'group',
+                    'friend',
+                    'profile',
+                    'addressbook',
+                    'calendar',
+                    'apps',
+                    'copy',
+                    'share',
+                    'wifi',
+                    'vipcard',
+                    'goods',
+                    'weibo',
+                    'message',
+                    'remind',
+                    'qrcode',
+                    'cart',
+                    'refresh',
+                    'top',
+                    'filter',
+                    'pic',
+                    'settings',
+                    'scan',
+                    'cascades',
+                    'search',
+                    'emoji',
+                    'edit'
+
+                ]
+            }
+        },
+        computed: {
+            list(){
+                return this.iconList.filter((item) => {
+                    return item.indexOf(this.keyword) !== -1;
+                })
+            }
+        }
+    }
+</script>
+
+<style scoped>
+.example-p{
+    height: 45px;
+    display: flex;
+    align-items: center;
+}
+.search-box{
+    text-align: center;
+    margin-top: 10px;
+}
+.search{
+    width: 300px;
+}
+ul,li{
+    list-style: none;
+}
+.icon-li{
+    display: inline-block;
+    padding: 10px;
+    width: 120px;
+    height: 120px;
+}
+.icon-li-content{
+    display: flex;
+    height: 100%;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+}
+.icon-li-content i{
+    font-size: 36px;
+    color: #606266;
+}
+.icon-li-content span{
+    margin-top: 10px;
+    color: #787878;
+}
+</style>

src/router/index.js

@@ -19,6 +19,11 @@ export default new Router({
                     component: resolve => require(['../components/page/Dashboard.vue'], resolve),
                     meta: { title: '系统首页' }
                 },
+                {
+                    path: '/icon',
+                    component: resolve => require(['../components/page/Icon.vue'], resolve),
+                    meta: { title: '自定义图标' }
+                },
                 {
                     path: '/table',
                     component: resolve => require(['../components/page/BaseTable.vue'], resolve),

static/css/main.css

@@ -19,6 +19,9 @@ body {
 a {
     text-decoration: none
 }
+[class*=" el-icon-lx"], [class^=el-icon-lx] {
+    font-family: lx-iconfont!important;
+}
 
 .content-box {
     position: absolute;