vue项目里面引用svg文件并给svg里面的元素赋值

下面是关于Vue项目中使用SVG文件的详细攻略：

使用Vue-Awesome模块

Vue-Awesome是一个使用font Awesome图标的Vue.js组件库，此库已经有了内置的SVG图标，可以让你很方便地调用SVG图标：

1. 首先安装vue-awesome
   npm install vue-awesome

2. 引入需要使用的组件。在需要使用SVG图标的组件中，可以通过import方式引入单个icon，例如：
   import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'
   或者通过import方式引入所有的icon，例如：
   ```
   import {library} from '@fortawesome/fontawesome-svg-core'
   import {fas} from '@fortawesome/free-solid-svg-icons'
   import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome'

library.add(fas)
Vue.component('font-awesome-icon', FontAwesomeIcon)
```

1. 在网页中直接使用它们，例如：
   <font-awesome-icon :icon="['fas', 'beer']" />

使用Vue-Inline-Svg模块

Vue-Inline-Svg是一个Vue.js组件库，可以让你在Vue项目中使用SVG图标。

1. 首先安装vue-inline-svg依赖
   npm install vue-inline-svg

2. 通过import方式，把VueInlineSVG组件引入到需要使用SVG图标的Vue组件内，例如：
   ```
   import VueInlineSVG from 'vue-inline-svg';

   export default {
   name: 'app',
   components: {
   VueInlineSVG
   }
   }
   ```

3. 在组件中使用VueInlineSVG组件，需要将SVG文件的路径传入'path'属性中，例如:
   <vue-inline-svg path="./assets/logo.svg"></vue-inline-svg>

4. 如果要在SVG图标中修改某些元素，可以使用“slot”属性将SVG图标资源传递到该组件中。
   创建一个文件'SvgIcon.vue':
   ``
<template>
<div v-if="svgData" :class="svg-icon ${iconName}`" v-html="svgData">