如何將 svg 文件導入 Vue 組件？

Question

在 vue 單文件組件中。我像這樣導入一個 svg 文件： import A from 'a.svg'然后如何在我的組件中使用 A？

Answer 1

根據您提供的信息，您可以做的是：

1. 安裝 vue-svg-loader

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

2. 配置 webpack：

 module: { rules: [ { test: /\\.svg$/, loader: 'vue-svg-loader', // `vue-svg` for webpack 1.x }, ], },

3. 導入 svg 並將其用作常規組件：

 <template> <nav id="menu"> <a href="..."> <SomeIcon class="icon" /> Some page </a> </nav> </template> <script> import SomeIcon from './assets/some-icon.svg'; export default { name: 'menu', components: { SomeIcon, }, }; </script>

參考： https : //github.com/visualfanatic/vue-svg-loader

Answer 2

如果您可以控制 svg 文件，則可以將其包裝在 vue 文件中，如下所示：

a.vue:

<template>
  <svg>...</svg>
</template>

之后只需要這樣的文件： import A from 'a.vue'

Answer 3

我已經在 Vue 3 中使用了以下內容。不需要弄亂 webpack 或安裝任何第三方插件。

<template>
  <img :src="mySVG" />
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      mySVG: require('./assets/my-svg-file.svg')
    }
  }
}
</script>

注意：我知道在 img src 中使用 SVG 時您不能修改它的某些部分，但是如果您只是想像使用任何其他圖像一樣使用 SVG 文件，這似乎是一個快速而簡單的解決方案。

Answer 4

如果您使用 Webpack，您可以使用 require 上下文從目錄加載 SVG 文件。 請注意，這會將所有 SVG 文件放在您的 Javascript 文件中，但可能會使您的代碼膨脹。

作為一個簡化的例子，我使用這個svg組件：

data() {
    return {
        svg: ''
    };
},

props: {
    name: {
        type: String,
        required: true
    }
}

created() {
    this.svg = require(`resources/assets/images/svg/${this.name}.svg`);
}

模板看起來像這樣：

<template>
    <div :class="classes" v-html="svg"></div>
</template>

通常，您不能像這樣簡單地加載 SVG 文件並期望它們與v-html指令一起使用，因為您沒有獲得原始輸出。 您必須使用 Webpack raw-loader因此請確保獲得原始輸出：

{
    test: /\.svg$/,
    use: [
        {
            loader: 'raw-loader',
            query: {
                name: 'images/svg/[name].[ext]'
            }
        },
        {
            loader: 'svgo-loader',
            options: svgoConfig
        }
    ]
}

上面的例子也使用了svgo-loader因為如果你這樣做，你會想要大量優化你的 SVG 文件。

希望這可以幫助您或其他任何人解決此問題，而無需直接進入第三方解決方案來解決此問題。

Answer 5

我只會使用vue-svg

通過 Vue CLI 3安裝：

vue add svg

輸入：

<img src="@/assets/logo.svg?data" />

輸出：

<img src="data:image/svg+xml;base64,..." />

或者這也是工作......

import LogoImage from "@/assets/logo.svg?inline"

Answer 6

我喜歡使用 pug 作為模板引擎（有很多優點）——如果你這樣做，你將能夠輕松地包含像 SVG 這樣的文件，只需編寫：

include ../assets/some-icon.svg

就是這樣！ 沒有別的事情可做 - 我認為這是一種非常簡單方便的方式來包含諸如較小的 svg 之類的東西 - 文件容易包含的代碼仍然很干凈！

在這里您可以獲得更多信息如何將 PugJS 包含到您的 Vue 實例中https://www.npmjs.com/package/vue-cli-plugin-pug

Answer 7

首先，您需要一個特定的組件加載器，該加載器將包含 svg my webpack.base.config.js

module: {
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
      {
        test: /\.vue$/,

        use: [
                    {
            loader: "vue-loader", 
            options: vueLoaderConfig
                    },
                    {
                        loader: "vue-svg-inline-loader",
                        options: { /* ... */ }
                    }
                ]
      }
//.. your other rules
}

vues-svg-inline-loader 的文檔： https : //www.npmjs.com/package/vue-svg-inline-loader
vue-svg-loader 的文檔： https : //www.npmjs.com/package/vue-svg-loader

接下來可以初始化一個vue文件

<template>
<div>

  <img svg-inline class="icon" src='../pathtoyourfile/yoursvgfile.svg' alt="example" />

</div>
</template>

<script>
import axios from 'axios'



export default {
  name: 'logo',
  data () {
  },
  }

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#logo{
  width:20%;
}
.rounded-card{
    border-radius:15px;
}
//the style of your svg 
//look for it in your svg file ..
//example
.cls-1,.cls-7{isolation:isolate;}.cls-2{fill:url(#linear-gradient);}.cls-3{fill:url(#linear-gradient-2);};stroke-width:2px;}..cls-6{opacity:0.75;mix-blend-mode:multiply;}.cls-7{opacity:0.13;}.cls-8{fill:#ed6a29;}.cls-9{fill:#e2522b;}.cls-10{fill:#ed956e;}.cls-185{fill:#ffc933;}..cls-13{fill:#ffd56e;}.cls-14{fill:#1db4d8;}.cls-15{fill:#0f9fb7;}.cls-16{fill:#3ad4ed;}.cls-17{fill:#25bdde;}.cls-18{fill:#fff;}
//


</style>

您的 svg fils 必須不包含樣式標簽，因此復制粘貼具有作用域屬性的 vue 樣式中的樣式，以使其特定於該組件
您可以在應用程序的特定位置加載組件並使用它

<template>

<v-app id="app">

    <logo/>
   <router-view/>

</v-app>



</template>

<script>
import logo from './components/logo.vue'

export default {
  name: 'App',
  data(){
    return {
      //your data
    }
  },
  components:{
logo //the name of the component you imported
  },


  }
}
</script>

<style>
#app {

  font-family: 'Hellow', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #070b0f;
  margin-top: 60px;
}

</style>

Answer 8

你也可以使用這樣的東西：

<template>
  <img :src="logo"></img>
</template>

<script>
import logo from '../assets/img/logo.svg'

export default {
  data() {
    return {
      logo
    }
  }
}
</script>

這不需要安裝外部模塊並且開箱即用。

Answer 9

您始終可以將其保存為/static/svg/myfile.svg的 .svg 文件（使用 webpack），並將其用作圖像文件： <img src="/static/svg/myfile.svg"> 。 不需要/導入/加載器。

Answer 10

+1 @Stephan-v 的解決方案，但這是 2021 年使用 Webpack 5 稍微修改的方法。

1. 你的 Vue 組件<template/>

選項 A：單個 SVG 文件

<template>
  <svg viewBox="0 0 24 24">
    <use :xlink:href="require('@/assets/icons/icon.svg')"></use>
  </svg>
</template>

選項 B：SVG Sprite（例如 FeatherIcons）

<template>
  <svg viewBox="0 0 24 24">
    <use
      :xlink:href="require('@/assets/icons/sprite.svg') + `#${iconName}`"
    ></use>
  </svg>
</template>

<script>
export default {
  props: {
    // Dynamic property to easily switch out the SVG which will be used
    iconName: {
      type: String,
      default: "star",
    },
  },
};
</script>

2. 你可能需要一個 Webpack 加載器。

注意：如果您使用 Vue 3（如上所述）或 Vite，您可能不需要 Webpack Loader。 如果您使用 Storybook 或 Nuxt，您可能仍然需要它。

$ npm install svgo-loader -D

$ yarn add svgo-loader -D

webpack.config.js （或類似的）

module.exports = {
  mode: "development",
  entry: "./foo.js",
  output: {},
  // ... other config ...
  module: {
    rules: [
      /////////////
      {
        // Webpack 5 SVG loader
        // https://webpack.js.org/guides/asset-modules/
        // https://dev.to/smelukov/webpack-5-asset-modules-2o3h
        test: /\.svg$/,
        type: "asset",
        use: "svgo-loader",
      },
    ],
    /////////////
  },
};

4. 完畢！

Answer 11

我能夠通過以下方式內聯加載 svgs

<div v-html="svgStringHere"></div>

其中svgStringHere是一個計算屬性，它返回一個 svg 作為字符串