一、图片的应用方式

在项目中图片应用方式一般是icon图标，或一些自用的图片用jpg\png，但使用jpg\png格式可能在某些情况下造成图片的模糊，这时我们可以用svg代替。

二、svg的使用

2.1 安装 vite-plugin-svg-icons

npm i vite-plugin-svg-icons -D
//或
cnpm i vite-plugin-svg-icons -D

2.2 可忽略安装glob

安装完后部分可能提示要安装fast-glob,Error: Cannot find module 'fast-glob'

cnpm install fast-glob -D

2.3 配置 vite.config.ts

配置相关文件

//引入依赖
import path from "path";
import { createSvgIconsPlugin } from "vite-plugin-svg-icons";
 
//启用插件
createSvgIconsPlugin({
  // 指定图标文件夹，绝对路径（NODE代码）
  iconDirs: [path.resolve(process.cwd(), "src/svgs")],
}),

全部代码：

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import mars3dCesium from "vite-plugin-mars3d"

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    mars3dCesium(),
    createSvgIconsPlugin({
      // 指定需要缓存的图标文件夹--配置路径在你的src的svg存放文件
      iconDirs:[path.resolve(process.cwd(),'src/svgs')],
      // 指定symbolId格式
      symbolId:'icon-[dir]-[name]'
    })
  ],
});

2.4 在 src/main.js 内引入注册脚本

// 引入Svg组件
import "virtual:svg-icons-register";
import SvgIcon from "./components/SvgIcon.vue";

全部代码：

import { createApp } from "vue";
import App from "./App.vue";

// svg icon注册脚本
import 'virtual:svg-icons-register';
// 全局注册
import SvgIcon from "./components/SvgIcon.vue";

import router from "./router/index";

const app = createApp(App);
app.mount("#app");
app.component("Icon", SvgIcon);

2.5 svg的icon组件

封装SvgIcon组件

<template>
  <svg aria-hidden="true" :class="svgClass">
    <use :xlink:href="iconName" :fill="color" />
  </svg>
</template>
<script lang="ts" setup>
import { computed } from "vue-demi";

const props = withDefaults(
  defineProps<{
    iconClass: string;
    className: string;
    color: string;
  }>(),
  {
    iconClass: "",
    className: "",
    color: "#889aa4",
  }
);
const iconName = computed(() => `#icon-${props.iconClass}`);
const svgClass = computed(() => {
  if (props.className) {
    return `svg-icon ${props.className}`;
  }
  return "svg-icon";
});
</script>
<style lang="less" scoped>
.svg-icon {
  fill: currentColor;
  vertical-align: middle;
}
</style>

2.6 使用组件

<template>
	 <Icon className="IconClass" iconClass="file_present"></Icon>
</template>

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

<style lang="less" scoped>
.IconClass {
  width:60px;
  height: 30px;
}
</style>

`展示：`

参考文章：脚本之家 and 雄霸是也

欢迎收藏、评论、点赞，一键三连呦！