如何在vue中使用svg图片及修改样式

原创已于 2024-11-05 20:45:07 修改

· 2.9k 阅读

8 ·

版权

文章标签：

#vue.js #前端 #javascript

于 2024-11-05 20:20:50 首次发布

然后在 `vue.config.js` 中配置：如何在vue中使用svg图片

在 Vue 中使用 SVG 图片有多种方法，可以根据具体需求选择合适的方式。以下是几种常见的方法：

1. 直接在模板中使用 `<img>` 标签

最简单的方法是直接使用 <img> 标签引用 SVG 文件

<template>
  <div>
    <img src="@/assets/my-icon.svg" alt="My Icon" />
  </div>
</template>

确保 SVG 文件在 assets 文件夹下或根据你的项目结构调整路径。

2. 使用 `<svg>` 标签嵌入 SVG 代码

如果你有 SVG 的源代码，你可以直接将其嵌入到 Vue 组件中：

<template>
  <div>
    <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
      <path d="M512 0l512 512H0z" fill="#ff0000" />
    </svg>
  </div>
</template>

这种方式可以让你直接控制 SVG 的样式和行为。

3. 使用 `vue-svg-loader`

如果你想要在 Vue 中以组件的方式使用 SVG，可以使用 vue-svg-loader 这个库。它允许你将 SVG 文件直接导入为 Vue 组件。

安装

首先安装 vue-svg-loader：

npm install vue-svg-loader --save-dev

配置 Webpack

接下来，你需要在 Webpack 配置中添加 vue-svg-loader。如果你使用 Vue CLI，通常在 vue.config.js 文件中配置：

// vue.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
        options: {
          // 可选配置
        },
      },
    ],
  },
};

使用 SVG 组件

然后你就可以在组件中直接导入并使用 SVG 文件了：

<template>
  <div>
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg'; // 引入 SVG 文件

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

npm install @svgr/webpack --save-dev

4. 使用 `@svgr/webpack`

如果你使用的是 Webpack，也可以使用 @svgr/webpack 将 SVG 转换为 React 组件的方式，方法与上面类似，但需要配置为 Vue 项目：

npm install @svgr/webpack --save-dev

然后在 `vue.config.js` 中配置：


module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        use: [
          {
            loader: '@svgr/webpack',
            options: {
              // 自定义选项
            },
          },
        ],
      },
    ],
  },
};

使用 SVG 组件

和上面的方法类似，直接在组件中使用 SVG：

<template>
  <div>
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg'; // 引入 SVG 文件

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

5. 使用 CSS 背景图

如果你只需要将 SVG 用作背景图，可以在 CSS 中引用它：

<template>
  <div class="icon"></div>
</template>

<style scoped>
.icon {
  width: 100px; /* 控制图标宽度 */
  height: 100px; /* 控制图标高度 */
  background-image: url('@/assets/my-icon.svg');
  background-size: cover; /* 使背景图像完全覆盖 */
}
</style>

总结

你可以根据项目的具体需求选择适合的方法。如果需要动态控制 SVG 的样式或行为，建议使用嵌入或 vue-svg-loader 方法；如果只是需要显示静态图标，使用 <img> 标签或 CSS 背景图会更简单。

如果使用vite创建项目

在 Vite 项目中使用 vue-svg-loader 处理 SVG 文件，需要安装并配置一下，因为 Vite 默认不支持 vue-svg-loader。以下是详细步骤：

1. 安装 `vue-svg-loader`

npm install vue-svg-loader -D

2. 配置 `vite.config.js`

Vite 不直接支持 vue-svg-loader，但可以使用 vite-plugin-vue2-svg 或 vite-plugin-vue3-svg，根据你的 Vue 版本选择一个插件。插件会使用 vue-svg-loader 来处理 SVG 文件。

Vue 3 项目

如果是 Vue 3 项目，可以使用 vite-svg-loader 插件。

npm install vite-svg-loader -D

在 vite.config.js 中进行如下配置：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import svgLoader from 'vite-svg-loader';

export default defineConfig({
  plugins: [
    vue(),
    svgLoader(), // 添加插件
  ],
});

Vue 2 项目

对于 Vue 2 项目，你可以使用 vite-plugin-vue2-svg 插件：

npm install vite-plugin-vue2-svg vue-svg-loader -D

在 vite.config.js 中配置：

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

export default defineConfig({
  plugins: [
    vue(),
    svgLoader({
      svgoConfig: {}, // 可选项，配置 SVGO
    }),
  ],
});

3. 在组件中使用 SVG 文件

安装和配置完成后，可以像引入组件一样在 Vue 组件中引入 SVG：

<template>
  <div>
    <MyIcon class="icon" />
  </div>
</template>

<script setup>
import MyIcon from '@/assets/my-icon.svg';
</script>

<style scoped>
.icon {
  width: 50px;
  height: 50px;
  fill: #4CAF50; /* SVG 颜色 */
}
</style>

总结

使用 vite-svg-loader 或 vite-plugin-vue2-svg 插件能够让你在 Vite 中顺利加载 SVG 文件，并以组件的形式直接使用。这样可以为 SVG 图标应用样式，同时保持较高的渲染质量。 Webpack，也可以使用 @svgr/webpack 将 SVG 转换为 React 组件的方式，方法与上面类似，但需要配置为 Vue 项目：

如何修改样式

1. 通过 CSS 类控制 SVG 样式

在 SVG 元素上添加一个 CSS 类来控制其样式

<template>
  <div>
    <MyIcon class="custom-icon" />
  </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg';

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

<style scoped>
.custom-icon {
  width: 50px;
  height: 50px;
  fill: red; /* 改变 SVG 的颜色 */
}
</style>

注意：如果 SVG 内部使用了 fill 属性指定颜色，则可能需要将 fill 属性设置为 currentColor 才能由 CSS 控制。

2. 使用 `currentColor` 来继承文本颜色

将 SVG 的 fill 设置为 currentColor，这样 SVG 会继承父元素的文字颜色：

<template>
  <div class="icon-wrapper" style="color: blue;">
    <MyIcon />
  </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg';

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

<style scoped>
.icon-wrapper {
  font-size: 24px; /* 控制图标大小 */
}
</style>

3. 使用动态 `style` 绑定

可以通过 Vue 的 :style 绑定动态地修改 SVG 的样式：

<template>
  <div>
    <MyIcon :style="{ fill: iconColor, width: iconSize + 'px', height: iconSize + 'px' }" />
  </div>
</template>

<script>
import MyIcon from '@/assets/my-icon.svg';

export default {
  components: {
    MyIcon,
  },
  data() {
    return {
      iconColor: 'green', // 动态控制颜色
      iconSize: 40,       // 动态控制大小
    };
  },
};
</script>

4. 使用 Props 传递样式

如果想要在不同的地方复用 SVG 组件并设置不同的样式，可以通过 props 动态传递：

<!-- MyIcon.vue -->
<template>
  <svg
    :style="{ fill: color, width: size + 'px', height: size + 'px' }"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 1024 1024"
  >
    <path d="..." />
  </svg>
</template>

<script>
export default {
  props: {
    color: {
      type: String,
      default: 'currentColor',
    },
    size: {
      type: Number,
      default: 24,
    },
  },
};
</script>

<!-- 使用 -->
<template>
  <div>
    <MyIcon color="purple" :size="50" />
  </div>
</template>

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

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

5. 使用 `scoped` 样式的例外来控制 SVG 内部的样式

如果你的 SVG 元素内含有嵌套的元素（例如多个 <path> 或 <circle>），你可以使用全局或 scoped 样式的穿透选择器 >>> 来控制其子元素的样式：

<template>
  <div>
    <MyIcon class="custom-icon" />
  </div>
</template>

<style scoped>
.custom-icon >>> path {
  fill: blue; /* 直接控制 SVG 内部的 path 元素颜色 */
}
</style>