• vue3 + vite项目使用SVG图标

    我们在开发一个项目时常会用到一些图标，有些图标在有限的图标库中却是没有，因此少数的图标需要我们去网上查找，或是自定义一些专用的图标。一般很少有图标库满足现实的项目开发，这时将推荐使用 iconify 这个图标库，几乎包含我们常见全部的图标，使用也非常简单。废话不多说咱们开始真刀实战。

    引入vite插件

    • unplugin-icons
    • unplugin-vue-components
    • vite-plugin-svg-icons
    • @iconify/json
    • @iconify/vue
    1. # npm
    2.  
    3. npm i -D @iconify/json @iconify/vue unplugin-icons vite-plugin-svg-icons unplugin-vue-components
    4.  
    5. #yarn
    6.  
    7. yarn add -D @iconify/json @iconify/vue unplugin-icons vite-plugin-svg-icons unplugin-vue-components
    8.  
    9. #pnpm
    10.  
    11. pnpm add -D @iconify/json @iconify/vue unplugin-icons vite-plugin-svg-icons unplugin-vue-components

    使用方式

    第一种：unplugin-icons

    配置vite插件：

    1.  // 配置图标- unplugin-icons
    2. Icons({
    3.     compiler: "vue3",
    4.     customCollections: {
    5.        ["local"]: FileSystemIconLoader(LOCAL_PATH, (svg: string) =>
    6.                svg.replace(/^, '))
    7.        },
    8.     scale: 1,
    9.     autoInstall: true,
    10.     defaultClass: "inline-block"
    11. }),
    12. // 配置unplugin-vue-components
    13. Components({
    14.     resolvers: [
    15.         IconsResolver({
    16.            prefix: "icon",
    17.            customCollections: COLLECTION_NAME,
    18.         }),
    19.     ],
    20. }),
    1. 使用iconify图标作为载体显示：
    2. <icon-ep-bicycle style="font-size: 30px;color: #0C0C0C;background-color: #efafaf">icon-ep-bicycle>

    效果：

    图标解释：

    icon 为我们自定义的前缀

    ep-bicycle 为图标的名字，可以去iconify查询，将冒号 ：更换横杠 - 。

            2. 使用本地svg图标作为载体显示

    下载svg图标文件，放在项目的 src/assets/icons/svg 目录下

    2. <icon-local-acrobat class="icons">icon-local-acrobat>
    3. <icon-local-control-center class="icons">icon-local-control-center>
    4. <icon-local-setting class="icons">icon-local-setting>

    效果：

    图标的样式部分可自行调整，演示的样式是我自定义的

    图标解释：

    icon-local-acrobat

    icon 为我们自定义的前缀

    local 为我们自定义的集合容器名，在配置vite时指定的

    acrobat 为图标文件的名字

    第二种：vite-plugin-svg-icons

    配置vite插件

    1. // 配置图标- vite-plugin-svg-icons
    2. createSvgIconsPlugin({
    3.     // 指定需要缓存的图标文件夹
    4.     iconDirs: [LOCAL_PATH],
    5.     // 指定symbolId格式
    6.     symbolId: `icon-[dir]-[name]`,
    7.     inject: "body-last",
    8.     customDomId: "__SVG_ICON_LOCAL__",
    9. })

    在main.ts中引入样式

    import "virtual:svg-icons-register";

    自定义SvgIcon组件方便图标的使用，这里我使用的是jsx的形式定义的组件，用vue定义的组件可以自行参照下面的形式写即可。

    1. import type {CSSProperties, PropType} from "vue";
    2. import {computed, defineComponent} from "vue";
    3. import {Icon} from "@iconify/vue";
    4.  
    5. // horizontal: 水平翻转 ，vertical：垂直翻转
    6. type FlipType = "horizontal" | "vertical";
    7. // 数字代表旋转角度  0° 90° 180° 270°
    8. type RotateType = 0 | 1 | 2 | 3;
    9.  
    10. /**
    11.  * SvgIcon 组件
    12.  * @date 2023/9/26
    13.  */
    14. export default defineComponent({
    15.     name: "SvgIcon",
    16.     props: {
    17.         // 图标名字
    18.         icon: {
    19.             type: String,
    20.             required: true,
    21.             default: "",
    22.         },
    23.         // 是否为本地 svg 图标
    24.         isLocal: {
    25.             type: Boolean,
    26.             default: false,
    27.         },
    28.         // 图标大小
    29.         size: {
    30.             type: [Number, String],
    31.             default: 14,
    32.         },
    33.         // 旋转角度
    34.         rotate: {
    35.             type: Number as PropType<RotateType>,
    36.             default: 0,
    37.         },
    38.         // 图标翻转（水平翻转、垂直翻转）
    39.         flip: String as PropType<FlipType>,
    40.         // 图标旋转动画效果
    41.         spin: {
    42.             type: Boolean,
    43.             default: false,
    44.         },
    45.         // 单独图标样式
    46.         iconStyle: Object as PropType<CSSProperties>,
    47.         // 图标颜色
    48.         color: String,
    49.         // 点击图标触发事件
    50.         onClick: Function as PropType<(e: MouseEvent) => void>,
    51.     },
    52.     setup(props, {attrs}) {
    53.         const bindAttrs = computed<{ class: string; style: string }>(() => ({
    54.             class: (attrs.class as string) || "",
    55.             style: (attrs.style as string) || "",
    56.         }));
    57.  
    58.         const symbolId = () => `#icon-${props.icon}`;
    59.  
    60.         const rotate = [0, 90, 180, 270];
    61.  
    62.         const localIconStyle = {
    63.             width: "1em",
    64.             height: "1em",
    65.             lineHeight: "1em",
    66.             fontSize: `${`${props.size}`.replace("px", "")}px`,
    67.             animation: props.spin ? "circle 3s infinite linear" : "",
    68.             transform: (() => {
    69.                 const scale = props.flip
    70.                     ? props.flip == "vertical"
    71.                         ? "scaleY(-1)"
    72.                         : props.flip == "horizontal"
    73.                             ? "scaleX(-1)"
    74.                             : ""
    75.                     : "";
    76.                 return `rotate(${rotate[props.rotate]}deg) ${scale}`;
    77.             })(),
    78.         };
    79.  
    80.         const iconStyles = {outline: "none", animation: props.spin ? "circle 3s infinite linear" : ""};
    81.         return () => (
    82.             <b
    83.                 onClick={e => {
    84.                     props.onClick?.(e);
    85.                 }}
    86.                 class={["inline-block", bindAttrs.value.class, props.onClick ? "cursor-pointer" : ""]}
    87.                 style={bindAttrs.value.style}
    88.             >
    89.                 {props.isLocal ? (
    90.                     <svg aria-hidden="true"
    91.                          style={props.iconStyle ? Object.assign(localIconStyle, props.iconStyle) : localIconStyle}>
    92.                         <use xlinkHref={symbolId()} fill="currentColor"/>
    93.                     svg>
    94.                 ) : (
    95.                     <Icon
    96.                         icon={props.icon}
    97.                         width={props.size}
    98.                         height={props.size}
    99.                         rotate={props.rotate}
    100.                         flip={props.flip}
    101.                         color={props.color}
    102.                         style={props.iconStyle ? Object.assign(iconStyles, props.iconStyle) : iconStyles}
    103.                     />
    104.                 )}
    105.             b>
    106.         );
    107.     },
    108. });

    使用iconify图标

    2. <SvgIcon icon="ep:avatar" size="50" color="#000">SvgIcon>

    使用本地图标

    2. <SvgIcon icon="setting" size="50" is-local class="icons">SvgIcon>

    区别是使用本地svg图标时需要 isLocal 设置为true，其他的属性可自行摸索，在组件中也有相应的代码注释

    完整代码

    vite配置：

    1. import {fileURLToPath, URL} from 'node:url'
    2.  
    3. import {defineConfig} from 'vite'
    4. import path from "path";
    5. import vue from '@vitejs/plugin-vue'
    6. import vueJsx from '@vitejs/plugin-vue-jsx'
    7. import Icons from "unplugin-icons/vite";
    8. import {FileSystemIconLoader} from "unplugin-icons/loaders";
    9. import {createSvgIconsPlugin} from "vite-plugin-svg-icons";
    10. import Components from "unplugin-vue-components/vite";
    11. import IconsResolver from 'unplugin-icons/resolver';
    12.  
    13. /**
    14.  * 获取项目根路径
    15.  * @descrition 末尾不带斜杠
    16.  */
    17. export function getRootPath() {
    18.     return path.resolve(process.cwd());
    19. }
    20.  
    21. /**
    22.  * 获取项目src路径
    23.  * @param srcName - src目录名称(默认: "src")
    24.  * @descrition 末尾不带斜杠
    25.  */
    26. export function getSrcPath(srcName = "src") {
    27.     const rootPath = getRootPath();
    28.     return `${rootPath}/${srcName}`;
    29. }
    30.  
    31. const LOCAL_PATH = `${getSrcPath()}/assets/icons/svg`
    32. const COLLECTION_NAME = "local"
    33.  
    34. // https://vitejs.dev/config/
    35. export default defineConfig({
    36.     plugins: [
    37.         vue(),
    38.         vueJsx(),
    39.         // 配置unplugin-vue-components
    40.         Components({
    41.             resolvers: [
    42.                 IconsResolver({
    43.                     prefix: "icon",
    44.                     customCollections: COLLECTION_NAME,
    45.                 }),
    46.             ],
    47.         }),
    48.         // 配置图标- unplugin-icons
    49.         Icons({
    50.             compiler: "vue3",
    51.             customCollections: {
    52.                 [COLLECTION_NAME]: FileSystemIconLoader(LOCAL_PATH, (svg: string) =>
    53.                     svg.replace(/^, '),
    54.                 ),
    55.             },
    56.             scale: 1,
    57.             autoInstall: true,
    58.             defaultClass: "inline-block",
    59.         }),
    60.         // 配置图标- vite-plugin-svg-icons
    61.         createSvgIconsPlugin({
    62.             // 指定需要缓存的图标文件夹
    63.             iconDirs: [LOCAL_PATH],
    64.             // 指定symbolId格式
    65.             symbolId: `icon-[dir]-[name]`,
    66.             inject: "body-last",
    67.             customDomId: "__SVG_ICON_LOCAL__",
    68.         })
    69.     ],
    70.     resolve: {
    71.         alias: {
    72.             '@':
    73.                 fileURLToPath(new URL('./src', import.meta.url))
    74.         }
    75.     }
    76. })

    SvgIcon组件：

    1. import type {CSSProperties, PropType} from "vue";
    2. import {computed, defineComponent} from "vue";
    3. import {Icon} from "@iconify/vue";
    4.  
    5. // horizontal: 水平翻转 ，vertical：垂直翻转
    6. type FlipType = "horizontal" | "vertical";
    7. // 数字代表旋转角度  0° 90° 180° 270°
    8. type RotateType = 0 | 1 | 2 | 3;
    9.  
    10. /**
    11.  * SvgIcon 组件
    12.  * @date 2023/9/26
    13.  */
    14. export default defineComponent({
    15.     name: "SvgIcon",
    16.     props: {
    17.         // 图标名字
    18.         icon: {
    19.             type: String,
    20.             required: true,
    21.             default: "",
    22.         },
    23.         // 是否为本地 svg 图标
    24.         isLocal: {
    25.             type: Boolean,
    26.             default: false,
    27.         },
    28.         // 图标大小
    29.         size: {
    30.             type: [Number, String],
    31.             default: 14,
    32.         },
    33.         // 旋转角度
    34.         rotate: {
    35.             type: Number as PropType<RotateType>,
    36.             default: 0,
    37.         },
    38.         // 图标翻转（水平翻转、垂直翻转）
    39.         flip: String as PropType<FlipType>,
    40.         // 图标旋转动画效果
    41.         spin: {
    42.             type: Boolean,
    43.             default: false,
    44.         },
    45.         // 单独图标样式
    46.         iconStyle: Object as PropType<CSSProperties>,
    47.         // 图标颜色
    48.         color: {
    49.             type: String,
    50.             default: "#000",
    51.         },
    52.         // 点击图标触发事件
    53.         onClick: Function as PropType<(e: MouseEvent) => void>,
    54.     },
    55.     setup(props, {attrs}) {
    56.         const bindAttrs = computed<{ class: string; style: string }>(() => ({
    57.             class: (attrs.class as string) || "",
    58.             style: (attrs.style as string) || "",
    59.         }));
    60.  
    61.         const symbolId = () => `#icon-${props.icon}`;
    62.  
    63.         const rotate = [0, 90, 180, 270];
    64.  
    65.         const localIconStyle = {
    66.             width: "1em",
    67.             height: "1em",
    68.             lineHeight: "1em",
    69.             fontSize: `${`${props.size}`.replace("px", "")}px`,
    70.             animation: props.spin ? "circle 3s infinite linear" : "",
    71.             transform: (() => {
    72.                 const scale = props.flip
    73.                     ? props.flip == "vertical"
    74.                         ? "scaleY(-1)"
    75.                         : props.flip == "horizontal"
    76.                             ? "scaleX(-1)"
    77.                             : ""
    78.                     : "";
    79.                 return `rotate(${rotate[props.rotate]}deg) ${scale}`;
    80.             })(),
    81.         };
    82.  
    83.         const iconStyles = {outline: "none", animation: props.spin ? "circle 3s infinite linear" : ""};
    84.         return () => (
    85.             <b
    86.                 onClick={e => {
    87.                     props.onClick?.(e);
    88.                 }}
    89.                 class={["inline-block", bindAttrs.value.class, props.onClick ? "cursor-pointer" : ""]}
    90.                 style={bindAttrs.value.style}
    91.             >
    92.                 {props.isLocal ? (
    93.                     <svg aria-hidden="true"
    94.                          style={props.iconStyle ? Object.assign(localIconStyle, props.iconStyle) : localIconStyle}>
    95.                         <use xlinkHref={symbolId()} fill="currentColor"/>
    96.                     svg>
    97.                 ) : (
    98.                     <Icon
    99.                         icon={props.icon}
    100.                         width={props.size}
    101.                         height={props.size}
    102.                         rotate={props.rotate}
    103.                         flip={props.flip}
    104.                         color={props.color}
    105.                         style={props.iconStyle ? Object.assign(iconStyles, props.iconStyle) : iconStyles}
    106.                     />
    107.                 )}
    108.             b>
    109.         );
    110.     },
    111. });

    main.ts 引入

    import "virtual:svg-icons-register";

    使用：

    1. <script setup lang="ts">
    2. import SvgIcon from "@/components/SvgIcon";
    3. script>
    4.  
    5. <template>
    6.   <main style="display: flex;flex-direction: column">
    7.     
    8.     <icon-ep-bicycle class="icons">icon-ep-bicycle>
    9.  
    10.     
    11.     <icon-local-acrobat class="icons">icon-local-acrobat>
    12.     <icon-local-control-center class="icons">icon-local-control-center>
    13.     <icon-local-setting class="icons">icon-local-setting>
    14.  
    15.  
    16.     
    17.     <SvgIcon icon="ep:avatar" size="50">SvgIcon>
    18.  
    19.     
    20.     <SvgIcon icon="setting" size="50" is-local class="icons">SvgIcon>
    21.   main>
    22. template>
    23.  
    24. <style scoped>
    25. .icons {
    26.   font-size: 30px;
    27.   color: #0C0C0C;
    28.   background-color: #efafaf;
    29.   margin: 20px;
    30. }
    31. style>

  • 相关阅读:
    SpringBoot+Vue的社区疫情防控管理系统|基于Python+Django的社区物资采购系统
    winform 自定义数值(数字)输入框
    【Javascript】运算符（赋值，算术，自增，自减）
    从系统设计到撸代码？我用了这些方法和工具
    【数据算法与结构】栈与队列篇
    天然气跟踪监管系统功能模块实现
    畅购商城_第15章-秒杀v-2.0
    willchange 优化性能的原理是什么
    Springboot毕设项目工商闲置单车销售平台2r343（java+VUE+Mybatis+Maven+Mysql）
    JPA 查询的类型
  • 原文地址：https://blog.csdn.net/WLPJLP/article/details/133681075