vue 3使用svg

Vue 3使用svg可以通过安装svg-sprite-loader来实现。在项目中使用svg-sprite-loader的方式是在webpack配置中定义一个svg规则，然后使用svg-sprite-loader作为loader来处理svg文件。具体的配置代码如下:

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  chainWebpack: (config) => {
    const svgRule = config.module.rule('svg')
    svgRule.uses.clear()
    svgRule.use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({ symbolId: 'icon-[name]' })
  }
})

以上就是在Vue 3项目中使用svg-sprite-loader的应用方法。另外，你还可以搜索svgo相关的信息来对svg进行优化配置。

相关问题

vue3使用svg修改颜色

在Vue3中，你可以通过操作SVG元素的`fill`属性来改变其颜色。首先，你需要在模板（template）中将SVG元素绑定到组件的数据上，然后在JavaScript部分动态地更新数据来更改颜色。下面是一个简单的示例：

<template>
  <svg ref="mySvg">
    <rect :fill="currentColor" width="100" height="100"/>
  </svg>
</template>

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

const mySvgRef = ref(null);
let currentColor = 'red'; // 初始颜色

function changeColor(newColor) {
  mySvgRef.value.currentFillColor = newColor; // 更新颜色
}
</script>

在这个例子中，我们创建了一个`ref` `mySvgRef` 来引用SVG元素，并设置初始颜色为红色。`changeColor`函数接受新的颜色作为参数，然后通过`.currentFillColor`属性来更新SVG元素的颜色。

当你需要改变颜色时，可以像这样调用`changeColor('blue')`。

vue3 使用 svg矢量图

在Vue3中使用SVG矢量图，你可以按照以下步骤进行操作：

1. 在`main.js`或`main.ts`文件中，引入`vite-plugin-svg-icons`插件并注册全局的SVG图标组件。你可以使用以下代码：

import 'vite-plugin-svg-icons/register';
import svgIcon from './components/SvgIcon.vue';
app.component('svg-icon', svgIcon);

这样就可以在整个应用程序中使用`<svg-icon>`组件了。\[1\]

2. 在`src/components`目录下创建一个名为`SvgIcon.vue`的组件文件，并添加以下代码：

<template>
  <svg :class="svgClass" aria-hidden="true" v-bind="$attrs" v-on="$listeners">
    <use :xlink:href="iconName"/>
  </svg>
</template>

<script>
export default {
  name: 'SvgIcon',
  props: {
    iconClass: {
      type: String,
      required: true,
    },
    className: {
      type: String,
      default: '',
    },
  },
  computed: {
    iconName() {
      return `#icon-${this.iconClass}`;
    },
    svgClass() {
      if (this.className) {
        return `svg-icon ${this.className}`;
      }
      return 'svg-icon';
    },
  },
};
</script>

<style scoped>
.svg-icon {
  width: 10em;
  height: 10em;
  fill: currentColor;
  overflow: hidden;
}
</style>

这个组件将接受一个`iconClass`属性，用于指定要显示的SVG图标的类名。你可以在模板中使用`<svg-icon>`标签，并通过`icon-class`属性传递类名，如下所示：

<svg-icon icon-class="book" class="w-14 h-14 mr-4 text-primary"></svg-icon>

这样就可以在Vue3 + Vite中使用SVG矢量图了。\[2\]\[3\]
#### 引用[.reference_title]
- *1* *2* *3* [vue中使用svg矢量图](https://blog.csdn.net/qq_44376306/article/details/123497667)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^insertT0,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]