vue3 vite项目中svg的封装和使用

vue3项目中svg的封装和使用

1.安装依赖插件

npm install vite-plugin-svg-icons -D

2.在vite.config.ts 中配置插件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from "path"

// 1.引入svg插件
import { createSvgIconsPlugin } from "vite-plugin-svg-icons"

export default defineConfig({
  plugins: [vue(),
  createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), "src/assets/icons")], //路径
    symbolId: "icon-[dir]-[name]"
  })
  ],
  server: {
    port: 880,
    proxy: { d: '' }
  },

  resolve: {
    alias: {
      "@": path.resolve('./src') //相对路径取别名 @代替src位置
    }
  }
})

3.挂载svg到main.ts中

import 'virtual:svg-icons-register';

4.简单使用

//  fill无法修改图标颜色时,删掉svg文件下的fill属性
<use xlink:href="#icon-phone"  fill="red"></use>

5.封装svg组件 components/SvgIcon.vue中

<template>
  <div>
    <svg :style="{ width: width, height: height }">
      <use :xlink:href="prefix + name" :fill="color"></use>
    </svg>
  </div>
</template>
<script setup lang="ts">
defineProps({
  //xlink:href属性值的前缀
  prefix: {
    type: String,
    default: '#icon-'
  },
  //svg矢量图的名字
  name: String,
  //svg图标的颜色
  color: {
    type: String,
    default: ''
  },
  //svg宽度
  width: {
    type: String,
    default: ''
  },
  //svg高度
  height: {
    type: String,
    default: ''
  }

})
</script>
<style scoped></style>

6. 挂载全局

import { createApp } from 'vue'
import SvgIcon from '@/components/SvgIcon.vue'
 const app = createApp(App).component('SvgIcon',SvgIcon)

7.使用svg

 <svg-icon name="iconName" width="18px" height="18px" />
### 创建使用自定义 SVG 图标组件 #### 配置 Vite 构建工具 为了简化开发流程并提高性能,在 `vite.config.js` 中配置插件来处理 SVG 文件: ```javascript import { resolve } from &#39;path&#39;; import { createSvgIconsPlugin } from &#39;vite-plugin-svg-icons&#39;; export default defineConfig({ plugins: [ vue(), createSvgIconsPlugin({ iconDirs: [resolve(process.cwd(), &#39;public/icons&#39;)], // 存放SVG文件的位置 symbolId: &#39;icon-[dir]-[name]&#39; // 定义symbol ID格式 }), ], }); ``` 此设置允许开发者通过简单的标签调用任何已注册的图标[^2]。 #### 编写全局 SVG 组件 创建名为 `SvgIcon.vue` 的单文件组件用于渲染动态传入名称对应的 SVG 路径数据: ```vue <template> <svg :class="className"> <use :xlink:href="`#${props.icon}`"></use> </svg> </template> <script setup lang="ts"> interface Props { icon?: string; className?: string; } const props = withDefaults(defineProps<Props>(), { icon: &#39;&#39;, className: &#39;&#39; }) </script> ``` 上述代码片段展示了如何构建一个可重用且灵活的 SVG 显示容器,它接受两个属性参数——图标的唯一标识符以及额外样式类名[^1]。 #### 注册为全局组件 为了让整个应用程序都能方便地访问到这个新组建而无需每次都单独导入, 可以将其作为全局组件安装在应用入口处(main.ts 或 main.js): ```typescript // 导入 SvgIcon 组件 import SvgIcon from &#39;./components/SvgIcon.vue&#39; app.component(&#39;SvgIcon&#39;, SvgIcon); ``` 这样做的好处是可以直接在模板里像 HTML 标签一样书写 `<SvgIcon>` 使用该组件。 #### 实际应用场景中的运用 当页面需要展示某个特定图标时只需简单声明即可实现预期效果: ```html <!-- 展示 home.svg --> <SvgIcon icon="icon-home" class="custom-class"/> ``` 这里的 `icon-home` 是由前面提到过的 `symbolId` 规则决定的具体实例化后的ID值;而附加的 CSS 类可用于进一步定制外观表现形式。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值