vue3+vite+ts技术栈中使用svg组件实践总结

安装

npm i vite-plugin-svg-icons -D

引入

在vite.config.ts中引入

import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
import path from "path";

plugins: [
  
  createSvgIconsPlugin({
    iconDirs: [path.resolve(process.cwd(), "src/icons/svg")],
    // svgoOptions: isBuild,
    // default
    symbolId: "icon-[dir]-[name]",
  }),
    ],

创建存放svg代码的文件夹(src/icons/svg),如下图

在这里插入图片描述

创建一个全局组件svg-icon(src/icons/index.vue)

<template>
  <svg :class="svgClass" v-bind="$attrs" :style="{ color: color }">
    <use :xlink:href="iconName"></use>
  </svg>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue'
const props = defineProps({
  name: {
    type: String,
    required: true
  },
  color: {
    type: String,
    default: ''
  }
})
const iconName = computed(() => `#icon-${props.name}`)
const svgClass = computed(() => {
  if (props.name) return `svg-icon icon-${props.name}`
  return 'svg-icon'
})
</script>

<style scoped>
.svg-icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  vertical-align: middle;
}
</style>

或者

<template>
  <svg aria-hidden="true" :opacity="opacity" :class="['svg-icon', $attrs.class]" :style="getStyle">
    <use :xlink:href="symbolId" :fill="color" />
  </svg>
</template>

<script lang="ts" setup>
import { computed, CSSProperties } from 'vue'

const props = defineProps({
  prefix: {
    type: String,
    default: 'icon'
  },
  name: {
    type: String,
    required: true
  },
  size: {
    type: [Number, String],
    default: 16
  },
  color: {
    type: String,
    default: '#333'
  },
  opacity: {
    type: [Number, String],
    default: 1
  }
})

const symbolId = computed(() => `#${props.prefix}-${props.name}`)

const getStyle = computed((): CSSProperties => {
  const { size } = props
  let s = `${size}`
  s = `${s.replace('px', '')}px`
  return {
    width: s,
    height: s,
    color: props.color
  }
})
</script>

<style lang="stylus" scoped>
.svg-icon
  display: inline-block
  overflow: hidden
  vertical-align: -0.2em
  // margin-right 0.1em
</style>

在main.js注入svg相关配置

import SvgIcon from './icons/index.vue'
import 'virtual:svg-icons-register'

app.component('svg-icon', SvgIcon)

使用

在svg代码文件夹中添加一个name为billSort的文件,然后使用的时候填入就行了

<svg-icon class="move align-[-11px] cursor-move" name="billSort" size="32" />

保姆级教程了,还不会就说不过去了哦

Vue3Vite使用 `svg-sprite-loader` 的目的是为了方便管理SVG图标并将其转换为CSS Sprites,这样可以优化网页性能,减少HTTP请求次数。以下是使用该插件的一般步骤: 1. 安装依赖: 首先,在项目目录下安装`svg-sprite-loader` 和 `svgo-loader`: ``` npm install svg-sprite-loader svgo-loader --save-dev ``` 2. 配置Vite构建工具: 在Vite项目的`vite.config.js`文件中配置loader,通常在`build`部分加入以下配置: ```javascript import { defineConfig } from &#39;vite&#39;; import svglite from &#39;vite-svg-plugin&#39;; export default defineConfig({ build: { // ...其他配置 rollupOptions: { input: &#39;src/main.ts&#39;, plugins: [ svglite({ spriteName: &#39;sprites.svg&#39;, // 设置生成的SVG精灵文件名 symbolId: &#39;icon-[name]&#39;, // 根据图标名称生成symbol的id loaderOptions: { svgo: {}, // 使用svgo优化SVG,如果需要自定义配置,添加更详细的选项 svgsprite: {} // 如果有特殊配置,例如添加include或exclude选项 } }) ] }, } }); ``` 3. 创建SVG图标: 在`src/icons`或其他合适的地方创建SVG文件,并将它们组织成合理的结构。 4. 引入和使用SVG图标: 在Vue组件中,通过`<use>`元素引用已经转换为CSS Sprites的SVG图标,比如: ```html <template> <div> <use :href="require(&#39;./sprites.svg#icon-my-icon&#39;)" /> </div> </template> <script> import { ref } from &#39;vue&#39;; export default { setup() { const icon = ref(&#39;my-icon&#39;); // 根据实际图标名称替换 return { icon }; } }; </script> ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值