Vue 3 项目中 SVG 图像的多种集成与优化策略

<template>
  <div>
    <!-- 引用 assets 目录下的 SVG -->
    <img alt="Facebook Icon" src="../assets/icons/facebook-header.svg" />

    <!-- 引用 public 目录下的 SVG (假设文件在 public/images/facebook-header.svg) -->
    <img alt="Facebook Icon" src="/images/facebook-header.svg" />
  </div>
</template>

<template>
  <div>
    <img :src="dynamicSvgPath" alt="Dynamic Icon" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      // Webpack 会处理 require() 中的路径
      dynamicSvgPath: require('../assets/icons/facebook-header.svg'),
    };
  },
};
</script>

<template>
  <div>
    <!-- 通过内联样式绑定背景图 -->
    <a href="#" class="header__top-item facebook" :style="facebookIconStyle"></a>

    <!-- 通过 CSS 类绑定背景图 -->
    <div class="background-svg-example"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      facebookIconStyle: {
        // 注意路径，Webpack/Vite 会处理 url() 中的相对路径
        backgroundImage: 'url(../assets/icons/facebook-header.svg)',
        width: '32px', // 示例尺寸
        height: '32px',
        display: 'inline-block',
      },
    };
  },
};
</script>

<style scoped>
.background-svg-example {
  width: 40px;
  height: 40px;
  background-image: url('../assets/icons/facebook-header.svg'); /* CSS 中引用 */
  background-size: contain;
  background-repeat: no-repeat;
}
</style>

// vue.config.js
const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 1. 排除默认的 SVG 处理规则
    config.module
      .rule('svg')
      .exclude.add(path.resolve(__dirname, 'src/assets/icons')) // 假设你的 SVG 都在这个目录
      .end();

    // 2. 添加一个新的规则来处理 SVG 文件，将其作为 Vue 组件
    config.module
      .rule('svg-component')
      .test(/\.svg$/)
      .include.add(path.resolve(__dirname, 'src/assets/icons'))
      .end()
      .use('vue-loader') // 使用 vue-loader
      .loader('vue-loader')
      .end()
      .use('vue-svg-loader') // 使用 vue-svg-loader (注意：这里需要一个兼容 Vue 3 的版本或替代方案)
      // 如果 vue-svg-loader 不兼容，可以考虑使用 raw-loader + vue-template-compiler (Vue 2)
      // 或更现代的方案如 @svgr/webpack (需要额外配置)
      // 对于 Vue 3，更推荐的是使用 @svgr/webpack 结合 file-loader 或 url-loader
      // 让我们使用 @svgr/webpack 作为更现代的示例
      .loader('@svgr/webpack')
      .options({
        // svgo: false, // 禁用 svgo 优化，如果需要可以开启
        icon: true, // 将 SVG 视为图标，生成更精简的代码
      })
      .end();
  },
};

npm install --save-dev @svgr/webpack vue-loader
# 或者 yarn add -D @svgr/webpack vue-loader

<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM14.0722 10.375C14.0722 9.775 13.9222 9.5 13.5722 9.5C13.2222 9.5 12.8722 9.5 12.5222 9.5C12.1722 9.5 11.8222 9.5 11.4722 9.5C11.1222 9.5 10.8222 9.775 10.8222 10.375V11.5H12.5222V10.375H14.0722ZM12 16.5C10.6125 16.5 9.5 15.3875 9.5 14C9.5 12.6125 10.6125 11.5 12 11.5C13.3875 11.5 14.5 12.6125 14.5 14C14.5 15.3875 13.3875 16.5 12 16.5Z" />
</svg>

<template>
  <div>
    <FacebookIcon class="my-icon" />
    <AnotherIcon :width="32" :height="32" color="blue" />
  </div>
</template>

<script>
import FacebookIcon from '@/assets/icons/facebook-header.svg'; // 导入 SVG 文件，它现在是一个 Vue 组件
// 假设有另一个 SVG 文件
// import AnotherIcon from '@/assets/icons/another-icon.svg'; 

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

<style scoped>
.my-icon {
  width: 24px;
  height: 24px;
  fill: red; /* 可以通过 CSS 修改 SVG 的颜色 */
}
</style>

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-plugin-vue-svg'; // 导入插件

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      svgoConfig: {
        multipass: true, // 启用多通道优化
      },
    }),
  ],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
});

npm install --save-dev vite-plugin-vue-svg
# 或者 yarn add -D vite-plugin-vue-svg

<template>
  <div>
    <FacebookIcon class="my-icon" />
    <AnotherIcon :width="32" :height="32" color="green" />
  </div>
</template