vue3+vite2中怎么使用svg方法

发布时间：2022-08-09 17:14:53 作者：iii
来源：亿速云阅读：421

Vue3 + Vite2 中怎么使用 SVG 方法

在现代前端开发中，SVG（可缩放矢量图形）因其轻量、可缩放、易于操作等特性，被广泛应用于图标、图表、动画等场景。Vue3 和 Vite2 作为当前流行的前端框架和构建工具，提供了强大的能力来支持 SVG 的使用。本文将详细介绍在 Vue3 + Vite2 项目中如何使用 SVG，包括直接引入、作为组件使用、动态加载 SVG 等方法。

1. 直接引入 SVG 文件

在 Vue3 + Vite2 项目中，最简单的使用 SVG 的方式是直接将其作为静态资源引入。Vite2 默认支持直接引入 SVG 文件，并且会将其作为 URL 处理。

1.1 在模板中使用

你可以在 Vue 组件的模板中直接使用 <img> 标签引入 SVG 文件：

<template>
  <img src="@/assets/logo.svg" alt="Logo" />
</template>

1.2 在样式表中使用

你也可以在样式表中使用 SVG 作为背景图片：

.logo {
  background-image: url('@/assets/logo.svg');
}

1.3 在 JavaScript 中使用

如果你需要在 JavaScript 中动态引入 SVG 文件，可以使用 import 语句：

import logoUrl from '@/assets/logo.svg';

const img = document.createElement('img');
img.src = logoUrl;
document.body.appendChild(img);

2. 将 SVG 作为 Vue 组件使用

将 SVG 作为 Vue 组件使用可以让你更方便地控制 SVG 的属性和样式。Vite2 提供了 vite-plugin-vue2-svg 插件（虽然名字中有 vue2，但它也支持 Vue3），可以让你直接将 SVG 文件作为 Vue 组件导入。

2.1 安装插件

首先，你需要安装 vite-plugin-vue2-svg 插件：

npm install vite-plugin-vue2-svg --save-dev

2.2 配置 Vite

在 vite.config.js 中配置插件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-plugin-vue2-svg';

export default defineConfig({
  plugins: [vue(), svgLoader()],
});

2.3 使用 SVG 组件

配置完成后，你可以直接在 Vue 组件中导入 SVG 文件并使用：

<template>
  <Logo />
</template>

<script>
import Logo from '@/assets/logo.svg';

export default {
  components: {
    Logo,
  },
};
</script>

2.4 自定义 SVG 组件

你也可以将 SVG 文件转换为 Vue 组件，以便更好地控制其属性和样式。例如，你可以手动创建一个 Vue 组件来包裹 SVG：

<template>
  <svg
    xmlns="http://www.w3.org/2000/svg"
    :width="size"
    :height="size"
    viewBox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="2"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <circle cx="12" cy="12" r="10" />
    <line x1="12" y1="8" x2="12" y2="12" />
    <line x1="12" y1="16" x2="12.01" y2="16" />
  </svg>
</template>

<script>
export default {
  props: {
    size: {
      type: [Number, String],
      default: 24,
    },
  },
};
</script>

然后你可以在其他组件中使用这个自定义的 SVG 组件：

<template>
  <CustomIcon size="32" />
</template>

<script>
import CustomIcon from '@/components/CustomIcon.vue';

export default {
  components: {
    CustomIcon,
  },
};
</script>

3. 动态加载 SVG

在某些情况下，你可能需要根据条件动态加载不同的 SVG 文件。Vite2 支持动态导入，因此你可以使用 import() 动态加载 SVG 文件。

3.1 动态导入 SVG 文件

你可以在 JavaScript 中动态导入 SVG 文件，并将其作为组件使用：

<template>
  <component :is="iconComponent" v-if="iconComponent" />
</template>

<script>
import { defineAsyncComponent, ref } from 'vue';

export default {
  setup() {
    const iconComponent = ref(null);

    const loadIcon = async (iconName) => {
      iconComponent.value = defineAsyncComponent(() =>
        import(`@/assets/icons/${iconName}.svg`)
      );
    };

    loadIcon('logo');

    return {
      iconComponent,
    };
  },
};
</script>

3.2 动态加载 SVG 作为图片

你也可以动态加载 SVG 文件并将其作为图片使用：

<template>
  <img :src="iconUrl" alt="Icon" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const iconUrl = ref('');

    const loadIcon = async (iconName) => {
      const module = await import(`@/assets/icons/${iconName}.svg`);
      iconUrl.value = module.default;
    };

    loadIcon('logo');

    return {
      iconUrl,
    };
  },
};
</script>

4. 使用 SVG Sprites

SVG Sprites 是一种将多个 SVG 图标合并到一个文件中的技术，可以减少 HTTP 请求并提高性能。Vite2 支持通过 vite-plugin-svg-icons 插件来生成和使用 SVG Sprites。

4.1 安装插件

首先，安装 vite-plugin-svg-icons 插件：

npm install vite-plugin-svg-icons --save-dev

4.2 配置 Vite