RuoYi-Vue 1.0

ruoyi-ui/src/views/components/icons/element-icons.js

@@ -0,0 +1,74 @@
+const elementIcons = [
+  'info',
+  'error',
+  'success',
+  'warning',
+  'question',
+  'back',
+  'arrow-left',
+  'arrow-down',
+  'arrow-right',
+  'arrow-up',
+  'caret-left',
+  'caret-bottom',
+  'caret-top',
+  'caret-right',
+  'd-arrow-left',
+  'd-arrow-right',
+  'minus',
+  'plus',
+  'remove',
+  'circle-plus',
+  'remove-outline',
+  'circle-plus-outline',
+  'close',
+  'check',
+  'circle-close',
+  'circle-check',
+  'circle-close-outline',
+  'circle-check-outline',
+  'zoom-out',
+  'zoom-in',
+  'd-caret',
+  'sort',
+  'sort-down',
+  'sort-up',
+  'tickets',
+  'document',
+  'goods',
+  'sold-out',
+  'news',
+  'message',
+  'date',
+  'printer',
+  'time',
+  'bell',
+  'mobile-phone',
+  'service',
+  'view',
+  'menu',
+  'more',
+  'more-outline',
+  'star-on',
+  'star-off',
+  'location',
+  'location-outline',
+  'phone',
+  'phone-outline',
+  'picture',
+  'picture-outline',
+  'delete',
+  'search',
+  'edit',
+  'edit-outline',
+  'rank',
+  'refresh',
+  'share',
+  'setting',
+  'upload',
+  'upload2',
+  'download',
+  'loading'
+]
+
+export default elementIcons

ruoyi-ui/src/views/components/icons/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="icons-container">
+    <aside>
+      <a href="#" target="_blank">Add and use
+      </a>
+    </aside>
+    <el-tabs type="border-card">
+      <el-tab-pane label="Icons">
+        <div v-for="item of svgIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <svg-icon :icon-class="item" class-name="disabled" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="Element-UI Icons">
+        <div v-for="item of elementIcons" :key="item">
+          <el-tooltip placement="top">
+            <div slot="content">
+              {{ generateElementIconCode(item) }}
+            </div>
+            <div class="icon-item">
+              <i :class="'el-icon-' + item" />
+              <span>{{ item }}</span>
+            </div>
+          </el-tooltip>
+        </div>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+
+<script>
+import svgIcons from './svg-icons'
+import elementIcons from './element-icons'
+
+export default {
+  name: 'Icons',
+  data() {
+    return {
+      svgIcons,
+      elementIcons
+    }
+  },
+  methods: {
+    generateIconCode(symbol) {
+      return `<svg-icon icon-class="${symbol}" />`
+    },
+    generateElementIconCode(symbol) {
+      return `<i class="el-icon-${symbol}" />`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.icons-container {
+  margin: 10px 20px 0;
+  overflow: hidden;
+
+  .icon-item {
+    margin: 20px;
+    height: 85px;
+    text-align: center;
+    width: 100px;
+    float: left;
+    font-size: 30px;
+    color: #24292e;
+    cursor: pointer;
+  }
+
+  span {
+    display: block;
+    font-size: 16px;
+    margin-top: 10px;
+  }
+
+  .disabled {
+    pointer-events: none;
+  }
+}
+</style>

ruoyi-ui/src/views/components/icons/svg-icons.js

@@ -0,0 +1,10 @@
+const req = require.context('../../../assets/icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const svgIcons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default svgIcons