当前位置：首页 > news >正文

vue3--SVG图标的封装与使用

news 来源：原创 2025/5/26 1:08:23

流程

终端输入- -安装下面这个包

npm install vite-plugin-svg-icons -D

vite.config.ts文件中引入

import {createSvgIconsPlugin} from 'vite-plugin-svg-icons'

vite.config.ts文件中配置plugins选项
将下面代码

createSvgIconsPlugin({
        //用于指定包含 SVG 图标的文件夹路径
        iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
        //定义生成的 SVG 符号（symbol）的 id 属性格式
        symbolId: 'icon-[dir]-[name]',
        })

放置在这里

plugins: [
    vue(),
    vueDevTools(),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]',
    })
  ]

记得引入path

main.ts入口文件引入

import 'virtual:svg-icons-register'

env.d.ts文件写入

declare module "virtual:svg-icons-register";

终端输入- -安装下面这个包

npm i fast-glob -D

按照这个路径“src/assets/icons”创建文件夹并且创建一个svg文件
在这里插入图片描述
粘贴下面代码

<svg t="1739623721311" class="icon" viewBox="0 0 1309 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1816" width="200" height="200"><path d="M1196.889302 23.813953a85.825488 85.825488 0 0 1 85.825489 85.825489v772.524651a85.825488 85.825488 0 0 1-85.825489 85.825488h-114.44986a28.600558 28.600558 0 1 1-57.22493 0H281.314233a28.600558 28.600558 0 1 1-57.224931 0H109.639442A85.825488 85.825488 0 0 1 23.813953 882.164093V109.639442A85.825488 85.825488 0 0 1 109.639442 23.813953H1196.889302z m28.624372 801.12521H81.01507v57.22493a28.600558 28.600558 0 0 0 28.624372 28.600558H1196.889302a28.600558 28.600558 0 0 0 28.624372-28.600558v-57.22493zM939.389023 81.038884H109.639442a28.600558 28.600558 0 0 0-28.600558 28.600558v658.074791h858.350139V81.038884z m257.500279 0h-200.275349v686.675349h228.899721V109.639442a28.600558 28.600558 0 0 0-28.624372-28.600558z m-85.825488 429.175069a85.825488 85.825488 0 1 1 0 171.674791 85.825488 85.825488 0 0 1 0-171.698604z m0 57.224931a28.600558 28.600558 0 1 0 0 57.22493 28.600558 28.600558 0 0 0 0-57.22493zM674.506419 224.946605c15.312372 3.834047 24.647442 19.360744 20.813395 34.673116-9.049302 36.197209-13.407256 62.964093-13.264372 79.443349 0.166698 24.885581 4.381767 50.009302 12.740465 75.53786 20.71814 63.583256 20.71814 127.380837-0.047628 190.392558a28.624372 28.624372 0 1 1-54.343442-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255a305.223442 305.223442 0 0 1-15.574325-92.874419c-0.166698-22.313674 4.858047-53.248 15.00279-93.707907a28.600558 28.600558 0 0 1 34.673117-20.837209z m-169.483907 0.642976a28.600558 28.600558 0 0 1 18.003348 36.244838c-16.884093 50.152186-16.884093 100.780651 0.095256 152.790325 20.71814 63.583256 20.71814 127.357023-0.023814 190.368744a28.624372 28.624372 0 1 1-54.367255-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255-20.765767-63.630884-20.765767-126.880744 0.047627-188.797024a28.600558 28.600558 0 0 1 36.244838-17.979535z m-171.650977 0a28.600558 28.600558 0 0 1 17.979535 36.244838c-16.860279 50.152186-16.860279 100.780651 0.095256 152.790325 20.741953 63.583256 20.741953 127.357023-0.023814 190.368744a28.624372 28.624372 0 1 1-54.367256-17.908093c16.955535-51.414326 16.955535-102.709581 0-154.719255-20.765767-63.630884-20.765767-126.880744 0.047628-188.797024A28.600558 28.600558 0 0 1 333.395349 225.589581z m777.692279 55.724652a85.825488 85.825488 0 1 1 0 171.67479 85.825488 85.825488 0 0 1 0-171.67479z m0 57.22493a28.600558 28.600558 0 1 0 0 57.22493 28.600558 28.600558 0 0 0 0-57.22493z m28.600558-171.674791a28.600558 28.600558 0 0 1 0 57.22493h-57.22493a28.600558 28.600558 0 0 1 0-57.22493h57.22493z" fill="#111111" p-id="1817"></path></svg>

封装svg组件
在这里插入图片描述

<template>
    <!-- svg:图标外层容器节点,内部需要与use标签结合使用 -->
    <svg :style="{ width, height }">
        <!-- xlink:href执行用哪一个图标,属性值务必#icon-图标名字 -->
        <!-- use标签fill属性可以设置图标的颜色 -->
        <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
</template>

<script setup lang="ts">
//接受父组件传递过来的参数
defineProps({
    //xlink:href属性值前缀
    prefix: {
        type: String,
        default: '#icon-'
    },
    //提供使用的图标名字
    name: String,
    //接受父组件传递颜色
    color: {
        type: String,
        default: ''
    },
    //接受父组件传递过来的图标的宽度
    width: {
        type: String,
        default: '16px'
    },
    //接受父组件传递过来的图标的高度
    height: {
        type: String,
        default: '16px'
    }
})
</script>
<style scoped></style>

svg全局注册
main.ts文件中写入

//引入svg组件
import svgIcon from './components/svgIcon/index.vue'
//全局注册组件
app.component('SvgIcon',svgIcon)

封装后的使用

<script setup lang="ts">
</script>

<template>
    <SvgIcon name="phone" color="pink" width="60" height="60"></SvgIcon>
</template>

<style scoped>

</style>