vue引入svg的完整指南

在現代Web應用程序中，圖形圖像是必不可少的。Vue成為Web開發人員的首選框架之一，因為它提供了一組強大的工具和API，使Web開發人員充分利用SVG的靈活性和可擴展性。Vue應用程序可以通過幾種不同的方式引入SVG文件。以下是一個完整的指南，深入研究如何使用Vue將SVG文件添加到您的應用程序中。

一、Vue引入SVG圖片

Vue允許我們像引入常規圖像一樣引入SVG文件。為此，我們可以使用<img>標記並設置SVG文件的路徑。但是，Vue會自動將SVG文件轉換為指定大小的PNG格式。為了避免這個問題，我們可以使用<object>標記。

  <template>
    <div>
      <img :src="require('../assets/icons/my-icon.svg')" alt="" />
      <object
        type="image/svg+xml"
        :data="require('../assets/icons/my-icon.svg')"
      />
    </div>
  </template>

使用require()將SVG文件導入，可以讓Vue將其作為模塊處理，並正確地支持Hot Module Replacement（HMR）機制。

二、Vue引入SVG圖片不顯示

在將SVG文件作為Vue組件引入時，可能會出現SVG不顯示的問題。這是因為SVG文件不是正常的Vue模板組件。解決此問題的方法是使用Vue的組件模板來呈現SVG文件。這可以通過使用<template>標記來完成，如下所示：

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

  <script>
    import MyIcon from './icons/MyIcon.vue';

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

  <!-- MyIcon.vue -->
  <template>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path d="M12 4c-4.41 0-8 3.59-8 8s3.59 8 8 8 8-3.59 8-8-3.59-8-8-8zm-1 10.9v-6.9h2v6.9l2.85 1.72-.75 1.23L12 16.46l-2.1 1.29-.75-1.23L11 14.9z"/>
      </svg>
    </div>
  </template>

在Vue的代碼中引用MyIcon.vue組件，並像通常那樣呈現它，使用<MyIcon />標記，這將在應用程序中呈現SVG圖標。該圖標將被由Vue組件模板呈現，可以以與常規Vue組件相同的方式進行測試和模擬。

三、Vue引入SVG矢量圖

Vue的內置vectoreditor組件提供了一種方便的方法，允許您在Vue應用程序中使用矢量圖形。

  <template>
    <div>
      <v-vector-editor>
        <path
          fill="none"
          stroke="currentColor"
          stroke-miterlimit="10"
          stroke-width="2"
          d="M85.5,72H14.5c-6.617,0-12-5.383-12-12V20c0-6.617,5.383-12,12-12h71c6.617,0,12,5.383,12,12v40
       C97.5,66.617,92.117,72,85.5,72z"
        />
      </v-vector-editor>
    </div>
  </template>

  <script>
    import { VectorEditor } from 'vue-vector-editor';

    export default {
      components: {
        'v-vector-editor': VectorEditor,
      },
    };
  </script>

在這個例子中，我們導入了Vue的vectoreditor組件，將一個SVG的<path>節點導入到Vue的模板中。

四、Vue引入SVG文件

一個常見的需求是將整個SVG文件作為Vue組件引入。Vue為此提供了一種簡單的方法：

  <template>
    <div>
      <MyIconSvg />
    </div>
  </template>

  <script>
    import { VueSVGIcon } from 'vue-svgicon';
    import myIcon from '../assets/icons/my-icon.svg';

    Vue.component('MyIconSvg', VueSVGIcon(myIcon));
  </script>

該代碼段在Vue中註冊了MyIconSvg組件，並使用Vue的VueSVGIcon()函數將導入的SVG文件傳遞給該組件。該函數將返回一個新的Vue組件類，其中包含SVG文件的自定義模板。

五、Vue引入SVG變色

在Vue中，可以通過為SVG文件添加fill和stroke屬性來更改SVG文件的默認顏色。要更改SVG文件的顏色，我們可以使用Vue的計算屬性，將新的顏色值綁定到SVG文件中。

  <template>
    <div>
      <svg :fill="fillColor" :stroke="strokeColor" :viewBox="viewBox">
        <path d="M8 14a2 2 0 0 0 2 2h4a2 2 0 0 0 2-2v-1H8v1z"/>
        <path d="M3 6a2 2 0 1 1 4 0 2 2 0 0 1-4 0zm16 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0zM3 14h18v-3a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3z"/>
      </svg>
    </div>
  </template>

  <script>
    export default {
      data() {
        return {
          fillColor: '#000',
          strokeColor: '#000',
          viewBox: '0 0 30 30',
        };
      },
      computed: {
        invertedFillColor() {
          return '#' + this.fillColor.split('').reverse().join('');
        },
        invertedStrokeColor() {
          return '#' + this.strokeColor.split('').reverse().join('');
        },
      },
    };
  </script>

在這個例子中，我們給<svg>標籤添加了fill和stroke屬性，並將Vue的計算屬性綁定到這兩個屬性上。計算屬性將fillColor和strokeColor值反轉並傳遞給SVG文件。這將更改SVG文件的填充和線條顏色。

六、Vue引入SVG文件報錯，not found

如果你在Vue中引入SVG文件時遇到了not found錯誤，可能是因為Vue未正確處理SVG文件。在這種情況下，您可以在Vue的Webpack配置中添加額外的模塊處理方法，來解決這個問題。

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

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

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

  <!-- webpack.config.js -->
  <module>
    rules: [
      {
        test: /\.svg$/,
        loader: 'vue-svg-loader',
      },
    ],
  </module>

在這個例子中，我們使用Webpack的vue-svg-loader來解決SVG文件加載問題。我們將其添加到Vue的Webpack配置文件中，並使用@引用vue-svg-loader，以確保Webpack能夠正確處理SVG文件。

七、Vue引入圖標

如果您需要使用某個圖標集中的圖標，可以使用vue-cli-plugin-svg-icon來將它們導入到您的Vue應用程序中。

  $ yarn add vue-cli-plugin-svg-icon -D

安裝完成後，您可以使用以下命令生成SVG圖標的Vue組件：

  $ vue invoke svg-icon

在運行上面的命令後，您將被提示輸入圖標所在的目錄和大小。完成後，插件將自動為您生成Vue組件。

八、Vue引入組件

在Vue應用程序中，您可以使用組件來引入SVG文件。組件是Vue應用程序的基本構建塊之一，旨在將可重用的代碼塊封裝為單獨的模塊。使用組件引入SVG文件，您可以利用Vue的強大的自定義組件功能，將SVG文件作為相應的Vue組件來呈現。

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

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

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

  <!-- MyIcon.vue -->
  <template>
    <div>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <path fill="#000" d="M12 14a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/>
        <path d="M12.578 19.578L6 13v-2l6.578-6.578a2.828 2.828 0 0 1 4.079 0L18 7.172 12.578 12.6a2.828 2.828 0 0 1-4.079 0zm8.243-6.243A6.986 6.986 0 0 0 19 5.984c-.997-.12-2.031.099-3 .564a7 7 0 1 0 4.821 12.452c.98-.966 1.585-2.29 1.692-3.824-.92.372-1.902.566-2.927.497z"/>
      </svg>
    </div>
  </template>

在這個例子中，我們通過Vue的組件功能引入了SVG文件。我們使用<MyIcon />標記在Vue應用程序中呈現組件，並使用<MyIcon.vue>標記定義組件。該組件將SVG文件作為其自定義模

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/300295.html