vue專案中使用svg

amy_發表於2019-04-03
VueSVG

SVG是什麼？

SVG是一種可縮放向量圖形，是基於可擴充套件標記語言（XML），用於描述二維向量圖形的圖形格式。

為什麼我使用SVG？

  1. SVG在放大的過程中，不會失真。
  2. 可讀性好，有利於SEO。由於SVG採用的是XML語法，圖形裡面的文字內容可以直接被瀏覽器搜尋引擎SEO讀屏軟體讀取。
  3. 可以修改SVG顏色，不需要同一個樣式的圖示，準備不同的顏色。只需給SVG新增不同的class就可以修改SVG的顏色了。

如何在專案中使用SVG？

我們專案是vue專案
第一步 封裝了一個svg-icon元件，程式碼如下：

   <template>
       <svg class='svg-icon' id="svgIcon" :class='iconClass' :viewBox='viewBox[iconClass]' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'>
           <g v-if="iconClass == 'icon-search'">
           <path d="M5.66666667,10.8333333 C2.81319546,10.8333333 0.5,8.52013787 0.5,5.66666667 C0.5,2.81319546 2.81319546,0.5 5.66666667,0.5 C8.52013787,0.5 10.8333333,2.81319546 10.8333333,5.66666667 C10.8333333,8.52013787 8.52013787,10.8333333 5.66666667,10.8333333 Z M5.66666667,9.83333333 C7.96785312,9.83333333 9.83333333,7.96785312 9.83333333,5.66666667 C9.83333333,3.36548021 7.96785312,1.5 5.66666667,1.5 C3.36548021,1.5 1.5,3.36548021 1.5,5.66666667 C1.5,7.96785312 3.36548021,9.83333333 5.66666667,9.83333333 Z"></path>
           <path d="M8.24644661,9.75355339 L11.4464466,12.9535534 C11.6417088,13.1488155 11.9582912,13.1488155 12.1535534,12.9535534 C12.3488155,12.7582912 12.3488155,12.4417088 12.1535534,12.2464466 L8.95355339,9.04644661 C8.75829124,8.85118446 8.44170876,8.85118446 8.24644661,9.04644661 C8.05118446,9.24170876 8.05118446,9.55829124 8.24644661,9.75355339 Z"></path>
       </g>
       </svg>
   </template>
   <script>
     export default {
         name: 'svg-icon',
         props: {
             iconClass: {
                 type: String
             }
         },
         data () {
             viewBox: {
               'icon-search': '0 0 14 14'  
             }
         }
     }
   </script>
   <style>
     .svg {line-height:1;display:inline-flex;align-items:center;}
     svg {fill: currentColor;max-height:64px;}
     .svg-icon {width:20px;height:20px;}
   </style>
複製程式碼

第二步 在元件中使用svg-icon元件

<script>
   // 在元件中引入svg-icon元件
   import svgIcon from '@/components/svg-icon'
   
    // 在components注入svg-icon

    componets: {svgIcon}
</script>
  

// 在html中使用svg-icon
<svg-icon iconClass="icon-search"></svg-icon>
複製程式碼

這樣我們就實現了在vue專案中使用SVG向量圖示了。

相關文章