Vite SVG Loader 使用指南

Vite SVG Loader 使用指南

【免费下载链接】vite-svg-loader Vite plugin to load SVG files as Vue components 项目地址: https://gitcode.com/gh_mirrors/vi/vite-svg-loader

项目概述

Vite SVG Loader 是一个专为 Vite 构建工具设计的 SVG 加载器插件，能够将 SVG 文件作为 Vue 组件进行导入和使用。该插件集成了 SVGO 优化工具，确保 SVG 文件在导入时自动进行优化处理。

安装与配置

安装步骤

通过 npm 安装 vite-svg-loader：

npm install vite-svg-loader --save-dev

基础配置

在 vite.config.ts 文件中配置插件：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteSvgLoader from 'vite-svg-loader'

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

核心功能详解

多种导入方式

Vite SVG Loader 支持多种 SVG 导入方式，满足不同场景需求：

组件导入（默认方式）

import Test from './assets/test.svg'

URL 导入

import testUrl from './assets/test.svg?url'

原始字符串导入

import testRaw from './assets/test.svg?raw'

跳过 SVGO 优化导入

import TestSkipSvgo from './assets/test.svg?skipsvgo'

实际应用示例

以下是一个完整的 Vue 组件示例，展示了各种导入方式的使用：

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
import Test from './assets/test.svg'
import TestSkipSvgo from './assets/test.svg?skipsvgo'
import testUrl from './assets/test.svg?url'
import testRaw from './assets/test.svg?raw'

const name = 'circle'
const Async = defineAsyncComponent(() => import(`./assets/${name}.svg`))
</script>

<template>
  <div id="component">
    <Test class="test-svg" data-animal="bird" aria-hidden="true" />
  </div>

  <div id="image">
    <img src="./assets/test.svg?url">
  </div>

  <div id="async">
    <Async />
  </div>

  <div id="skipsvgo">
    <TestSkipSvgo />
  </div>

  <div id="url">
    {{ testUrl }}
  </div>

  <div id="raw">
    {{ testRaw }}
  </div>
</template>

高级配置选项

默认导入类型配置

可以通过配置改变默认的导入行为：

viteSvgLoader({
  defaultImport: 'url' // 或 'raw'
})

SVGO 优化配置

支持自定义 SVGO 配置参数：

viteSvgLoader({
  svgoConfig: {
    multipass: true,
    plugins: [
      'preset-default',
      { name: 'prefixIds' },
    ],
  }
})

禁用 SVGO 优化

可以全局禁用 SVGO 优化：

viteSvgLoader({
  svgo: false
})

TypeScript 支持

在 TypeScript 项目中使用时，需要在 vite-env.d.ts 文件中添加类型引用：

/// <reference types="vite/client" />
/// <reference types="vite-svg-loader" />

最佳实践建议

文件组织管理

建议将所有 SVG 文件统一放置在 assets 目录下，便于管理和维护。项目示例中的文件结构如下：

• example/src/assets/circle.svg
• example/src/assets/style.svg
• example/src/assets/test.svg
• example/src/assets/vue.svg

异步组件加载

对于动态导入的场景，可以使用 Vue 的 defineAsyncComponent 方法：

const Async = defineAsyncComponent(() => import(`./assets/${name}.svg`))

样式与属性控制

通过组件类名和属性来控制 SVG 的显示效果：

<Test class="test-svg" data-animal="bird" aria-hidden="true" />

总结

Vite SVG Loader 为 Vue 开发者提供了便捷的 SVG 文件管理方案，通过组件化的方式简化了 SVG 的使用流程。无论是简单的图标显示还是复杂的动态加载场景，该插件都能提供稳定可靠的支持。

【免费下载链接】vite-svg-loader Vite plugin to load SVG files as Vue components 项目地址: https://gitcode.com/gh_mirrors/vi/vite-svg-loader