devbox
繁依Fanyi0
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

【Vue3】elementPlus图标和自定义侧边栏图标_element plus图标

作者：繁依Fanyi0 | 2024-02-19 06:46:04

赞

踩

element plus图标

目录

使用elementPlus图标

自定义图标

侧边栏自定义图标的应用

vite+vue3+ts中使用自定义图标

使用elementPlus图标

在项目中引入

npm install @element-plus/icons-vue
  1. import 'element-plus/dist/index.css'
  2. import * as ElementPlusIconsVue from '@element-plus/icons-vue'
  3.  
  4. // 图标
  5. for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  6.     app.component(key, component)
  7. }

方法一（动态使用图标）：

  1. <el-icon>
  2.     <component :is="menu.meta.icon" class="icon"></component>
  3. </el-icon>

方法二（直接使用图标）：

然后直接使用 

<el-icon><Expand /></el-icon>

具体详细图标可查看：https://element-plus.gitee.io/zh-CN/component/icon.html

自定义图标

1、创建src/icons/svg目录，将自己的图标放入此文件夹内。

2、npm install svg-sprite-loader --save-dev                  (实现加载svg自定义组件)

     npm i svgo@1.0.5 svgo-loader@2.2.0 --save-dev              （自动去除图标中的fill）

3、配置vue.config.js，没有在项目根目录新建一个即可

  1. const path = require("path");
  2. function resolve (dir) {
  3.   return path.join(__dirname, dir);
  4. }
  5.  
  6. module.exports = {
  7.   chainWebpack: config => {
  8.     // 清除svg默认配置对./src/icons文件夹的处理
  9.     config.module
  10.       .rule("svg")
  11.       .exclude.add(resolve("src/icons")) // icons存放地（svg放的地方）
  12.       .end()
  13.  
  14.     // 添加新的rule处理./src/icons文件夹的svg文件
  15.     config.module
  16.       .rule("svg-sprite")
  17.       .test(/\.svg$/)
  18.       .include
  19.       .add(resolve("src/icons"))
  20.       .end()
  21.       .use("svg-sprite-loader")
  22.       .loader("svg-sprite-loader")
  23.       .options({
  24.         symbolId: "icon-[name]",
  25.         include: ["src/assets/icons"]
  26.       })
  27.       .end()
  28.      //去除fill
  29.       .before("svg-sprite-loader")
  30.       .use("svgo-loader")
  31.       .loader("svgo-loader")
  32.       .options({
  33.         plugins: [
  34.           { removeAttrs: { attrs: "fill" } }
  35.         ]
  36.       })
  37.       .end()
  38.   },
  39. }

5、 创建src/components/svg，封装svg组件

  1. <template>
  2.   <div
  3.     v-if="External"
  4.     :style="styleExternalIcon"
  5.     class="svg-external-icon svg-icon"
  6.     v-bind="$attrs"
  7.   />
  8.   <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
  9.     <use :xlink:href="symbolId" />
  10.   </svg>
  11. </template>
  12.  
  13. <script>
  14. // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  15. import { isExternal } from '@/utils/validate'
  16. import { defineComponent, reactive, ref, computed } from 'vue'
  17.  
  18. export default defineComponent({
  19.   name: 'SvgIcon',
  20.   props: {
  21.     iconClass: {
  22.       type: String,
  23.       required: true
  24.     },
  25.     className: {
  26.       type: String,
  27.       default: ''
  28.     }
  29.   },
  30.   setup (props) {
  31.     const External = computed(() => {
  32.       return isExternal(props.iconClass)
  33.     })
  34.     const symbolId = computed(() => {
  35.       return `#icon-${props.iconClass}`
  36.     })
  37.     const svgClass = computed(() => {
  38.       if (props.className) {
  39.         return 'svg-icon ' + props.className
  40.       } else {
  41.         return 'svg-icon'
  42.       }
  43.     })
  44.     const styleExternalIcon = computed(() => {
  45.       return {
  46.         mask: `url(${props.iconClass}) no-repeat 50% 50%`,
  47.         '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
  48.       }
  49.     })
  50.  
  51.     return {
  52.       External,
  53.       symbolId,
  54.       svgClass,
  55.       styleExternalIcon,
  56.     }
  57.   }
  58. })
  59. </script>
  60.  
  61. <style scoped>
  62. .svg-icon {
  63.   width: 1.4em;
  64.   height: 1.4em;
  65.   margin: 0 0 0 2px;
  66.   vertical-align: -0.1em;
  67.   fill: currentColor;
  68.   overflow: hidden;
  69. }
  70.  
  71. .svg-external-icon {
  72.   background-color: currentColor;
  73.   mask-size: cover !important;
  74.   display: inline-block;
  75. }
  76. </style>

其中utils/validate.ts

  1. /**
  2.  * Created by PanJiaChen on 16/11/18.
  3.  */
  4.  
  5. /**
  6.  * @param {string} path
  7.  * @returns {Boolean}
  8.  */
  9.  export function isExternal(path: string) {
  10.     const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
  11.     return isExternal;
  12.   }

6、使用全局注册，这样就不用图标一个一个引入了，创建src/icons/index.ts

  1. import SvgIcon from '@/components/svg/index.vue' // svg component
  2.  
  3. /**
  4.  * 一次性的引入某个文件夹下的所有文件
  5. * require.context(directory, useSubdirectories,regExp)
  6. * 形参: 
  7. * directory：需要引入文件的目录
  8. * useSubdirectories：是否查找该目录下的子级目录
  9. * regExp：匹配引入文件的正则表达式
  10. */
  11.  
  12. const registerSvgIcon = (app: any) => {
  13.     app.component('svg-icon', SvgIcon) // 注册全局组件
  14.  
  15.     const req = require.context('./svg', false, /\.svg$/);
  16.     const requireAll = (requireContext: any) => requireContext.keys().map(requireContext);
  17.     requireAll(req);
  18. }
  19.  
  20. export default registerSvgIcon;

5、main.ts引入

  1. import registerSvgIcon from "@/icons/index";
  2. const app = createApp(App)
  3. registerSvgIcon(app)

6、页面使用

在所需页面中也需要引入svgIcon组件

<SvgIcon icon-class="yonghu"/>

侧边栏自定义图标的应用

侧边栏使用图标的时候需要判断一下，使用的是自定义图标还是elementPlus图标。

像elementUI图标他每一个图标都是以el-icon开头的，所以只要判断一下图标是否包含‘el-icon’，不包含的就是自定义图标。而elementPlus图标相反，所以我们可以在自定义图标前添加一个标识即可。 

我这里没有使用render进行对图标封装，因为我还没弄明白怎么返回elementPlus图标，所以有大佬如果知道，还请留言指教

重点代码：

  1. <!-- 判断有没有图标并且是否是自定义图标，有就展示，没有则去除icon的位置 -->
  2.           <SvgIcon
  3.             v-if="
  4.               item.meta && item.meta.icon && item.meta.icon.includes('icon-')
  5.             "
  6.             :icon-class="item.meta.icon"
  7.           />
  8.           <el-icon v-else>
  9.             <component
  10.               v-if="item.meta && item.meta.icon"
  11.               :is="item.meta.icon"
  12.               class="icon"
  13.             ></component>
  14.           </el-icon>

完整代码：

  1. <template>
  2.   <div v-if="!item.meta || !item.meta.hide">
  3.     <!-- 一级 -->
  4.     <template
  5.       v-if="
  6.         hasOneShowingChild(item.children, item) &&
  7.         (!onlyOneChild.children || onlyOneChild.noShowingChildren) &&
  8.         (!item.meta || !item.alwaysShow)
  9.       "
  10.     >
  11.       <app-link v-if="item.meta" :to="item.path">
  12.         <el-menu-item
  13.           :index="item.children ? item.children[0].path : item.path"
  14.           :class="{ 'submenu-title-noDropdown': item.class_true }"
  15.         >
  16.           <!-- 判断有没有图标并且是否是自定义图标，有就展示，没有则去除icon的位置 -->
  17.           <SvgIcon
  18.             v-if="
  19.               item.meta && item.meta.icon && item.meta.icon.includes('icon-')
  20.             "
  21.             :icon-class="item.meta.icon"
  22.           />
  23.           <el-icon v-else>
  24.             <component
  25.               v-if="item.meta && item.meta.icon"
  26.               :is="item.meta.icon"
  27.               class="icon"
  28.             ></component>
  29.           </el-icon>
  30.  
  31.           <template #title>
  32.             {{ item.meta.title }}
  33.           </template>
  34.         </el-menu-item>
  35.       </app-link>
  36.     </template>
  37.     <!-- 二级 -->
  38.     <template v-else>
  39.       <el-sub-menu ref="subMenu" :index="item.path" popper-append-to-body>
  40.         <template #title>
  41.           <SvgIcon
  42.             v-if="
  43.               item.meta && item.meta.icon && item.meta.icon.includes('icon-')
  44.             "
  45.             :icon-class="item.meta.icon"
  46.           />
  47.           <el-icon v-else>
  48.             <component
  49.               v-if="item.meta && item.meta.icon"
  50.               :is="item.meta.icon"
  51.               class="icon"
  52.             ></component>
  53.           </el-icon>
  54.           <span>{{ item.meta.title }}</span>
  55.         </template>
  56.         <el-menu-item-group>
  57.           <SidebarItem
  58.             v-for="v in item.children"
  59.             :item="v"
  60.             :key="v.path"
  61.             :base-path="v.path"
  62.             :is-nest="true"
  63.           ></SidebarItem>
  64.         </el-menu-item-group>
  65.       </el-sub-menu>
  66.     </template>
  67.   </div>
  68. </template>
  69.  
  70. <script>
  71. import { defineComponent, reactive, ref } from 'vue'
  72. import AppLink from './Link.vue'
  73. import SvgIcon from "@/components/svg/index.vue";
  74. import Item from './item.vue'
  75.  
  76. export default defineComponent({
  77.   name: 'SidebarItem',
  78.   components: {
  79.     AppLink,
  80.     SvgIcon,
  81.     Item
  82.   },
  83.   props: {
  84.     item: {
  85.       type: Object,
  86.       required: true,
  87.     },
  88.     isNest: {
  89.       type: Boolean,
  90.       required: false,
  91.     },
  92.     basePath: {
  93.       type: String,
  94.       required: true,
  95.     },
  96.   },
  97.   setup () {
  98.     const onlyOneChild = ref();
  99.  
  100.     function hasOneShowingChild (children, parent) {
  101.       if (!children) {
  102.         children = [];
  103.       }
  104.       const showingChildren = children.filter((item) => {
  105.         if (item.meta && item.meta.hide) {
  106.           return false;
  107.         } else {
  108.           // Temp set(will be used if only has one showing child)
  109.           onlyOneChild.value = item;
  110.           return true;
  111.         }
  112.       });
  113.  
  114.       // When there is only one child router, the child router is displayed by default
  115.       if (showingChildren.length === 1) {
  116.         return true;
  117.       }
  118.  
  119.       // Show parent if there are no child router to display
  120.       if (showingChildren.length === 0) {
  121.         onlyOneChild.value = { ...parent, path: '', noShowingChildren: true };
  122.         return true;
  123.       }
  124.  
  125.       return false;
  126.     }
  127.  
  128.     return {
  129.       onlyOneChild,
  130.       hasOneShowingChild,
  131.     }
  132.   }
  133. })
  134. </script>
  135.  
  136. <style lang="scss">
  137. .icon {
  138.   font-size: 20px;
  139. }
  140.  
  141. .submenu-title-noDropdown {
  142.   color: #3fa9f5;
  143. }
  144. </style>

vite+vue3+ts中使用自定义图标

1、创建src/icons/svg目录，将自己的图标放入此文件夹内。

2、下载插件

npm i vite-plugin-svg-icons -D

3、vite.config.ts 中的配置插件

  1. import { defineConfig } from 'vite'
  2. import vue from '@vitejs/plugin-vue'
  3. import path from "path";
  4. import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
  5.  
  6. // https://vitejs.dev/config/
  7. export default defineConfig({
  8.   plugins: [
  9.     vue(),
  10.     createSvgIconsPlugin({
  11.       // 指定需要缓存的图标文件夹
  12.       iconDirs: [path.resolve(process.cwd(), 'src/icons')],
  13.       // 指定symbolId格式
  14.       symbolId: 'icon-[dir]-[name]',
  15.     }),
  16.   ],
  17. })

4、main.ts

import 'virtual:svg-icons-register'

5、 创建src/components/svg，封装svg组件

  1. <template>
  2.   <div
  3.     v-if="External"
  4.     :style="styleExternalIcon"
  5.     class="svg-external-icon svg-icon"
  6.     v-bind="$attrs"
  7.   />
  8.   <svg v-else :class="svgClass" aria-hidden="true" v-bind="$attrs">
  9.     <use :xlink:href="symbolId" />
  10.   </svg>
  11. </template>
  12.  
  13. <script>
  14. // doc: https://panjiachen.github.io/vue-element-admin-site/feature/component/svg-icon.html#usage
  15. import { isExternal } from '@/utils/validate'
  16. import { defineComponent, reactive, ref, computed } from 'vue'
  17.  
  18. export default defineComponent({
  19.   name: 'SvgIcon',
  20.   props: {
  21.     iconClass: {
  22.       type: String,
  23.       required: true
  24.     },
  25.     className: {
  26.       type: String,
  27.       default: ''
  28.     }
  29.   },
  30.   setup (props) {
  31.     const External = computed(() => {
  32.       return isExternal(props.iconClass)
  33.     })
  34.     const symbolId = computed(() => {
  35.       return `#icon-${props.iconClass}`
  36.     })
  37.     const svgClass = computed(() => {
  38.       if (props.className) {
  39.         return 'svg-icon ' + props.className
  40.       } else {
  41.         return 'svg-icon'
  42.       }
  43.     })
  44.     const styleExternalIcon = computed(() => {
  45.       return {
  46.         mask: `url(${props.iconClass}) no-repeat 50% 50%`,
  47.         '-webkit-mask': `url(${props.iconClass}) no-repeat 50% 50%`
  48.       }
  49.     })
  50.  
  51.     return {
  52.       External,
  53.       symbolId,
  54.       svgClass,
  55.       styleExternalIcon,
  56.     }
  57.   }
  58. })
  59. </script>
  60.  
  61. <style scoped>
  62. .svg-icon {
  63.   width: 1.4em;
  64.   height: 1.4em;
  65.   margin: 0 0 0 2px;
  66.   vertical-align: -0.1em;
  67.   fill: currentColor;
  68.   overflow: hidden;
  69. }
  70.  
  71. .svg-external-icon {
  72.   background-color: currentColor;
  73.   mask-size: cover !important;
  74.   display: inline-block;
  75. }
  76. </style>

 其中utils/validate.ts

  1. /**
  2.  * Created by PanJiaChen on 16/11/18.
  3.  */
  4.  
  5. /**
  6.  * @param {string} path
  7.  * @returns {Boolean}
  8.  */
  9.  export function isExternal(path: string) {
  10.     const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path);
  11.     return isExternal;
  12.   }

6、全局注册mian.ts

  1. import 'virtual:svg-icons-register'
  2. import SvgIcon from "@/components/svg/index.vue";
  3.  
  4. const app = createApp(App)
  5. app.use(store)
  6.     .use(router)
  7.     .use(ElementPlus)
  8.     .component('svg-icon', SvgIcon)
  9.     .mount("#app");

7、页面使用

 在所需页面中也需要引入svgIcon组件

<SvgIcon icon-class="yonghu"/>
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/113187
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号