這篇文章將為大家詳細(xì)講解有關(guān)在React、Vue項(xiàng)目中如何使用SVG，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù)，包含不限于網(wǎng)站設(shè)計(jì)制作、成都做網(wǎng)站、和平網(wǎng)絡(luò)推廣、小程序設(shè)計(jì)、和平網(wǎng)絡(luò)營(yíng)銷、和平企業(yè)策劃、和平品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運(yùn)營(yíng)等，從售前售中售后，我們都將竭誠(chéng)為您服務(wù)，您的肯定，是我們最大的嘉獎(jiǎng)；創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供和平建站搭建服務(wù)，24小時(shí)服務(wù)熱線：13518219792，官方網(wǎng)址：www.cdcxhl.com

在一些現(xiàn)代的扁平化設(shè)計(jì)網(wǎng)站，特別是移動(dòng)端網(wǎng)站，經(jīng)常會(huì)包含許多簡(jiǎn)單而清晰的小圖標(biāo)，例如網(wǎng)站圖標(biāo)、用戶的默認(rèn)頭像、移動(dòng)端網(wǎng)頁(yè)首頁(yè)底部固定的切換欄等，這些小圖標(biāo)一般都是由美工做好，可能會(huì)放到精靈圖上，前端再進(jìn)行裁切展示。

而實(shí)際上，這些簡(jiǎn)單的小圖標(biāo)完全沒(méi)必要讓美工來(lái)做，前端完全可以通過(guò) svg使用代碼把這些簡(jiǎn)單的圖標(biāo)畫出來(lái)，并且，因?yàn)檫@些圖標(biāo)是用代碼描述出來(lái)的，所以如果想要修改這些圖標(biāo)，例如改變圖標(biāo)的顏色、圖標(biāo)的形狀、大小等，都只是改幾行代碼的事情，非常簡(jiǎn)單，根本無(wú)需美工返工重做。

本文不是闡述如何利用 svg 來(lái)進(jìn)行畫圖的，不了解 svg的可以前往 這里查看， 本文主要說(shuō)一下如何在網(wǎng)站中使用 svg。

SVG在一般網(wǎng)頁(yè)中的使用

svg使用 XML 格式定義圖像，你也可以把它看做是一般的 HTML標(biāo)簽，鑲嵌在網(wǎng)頁(yè)中呈現(xiàn)出某種效果，在網(wǎng)頁(yè)中使用svg的基本示例如下：

效果如下：

可以看到，普通網(wǎng)頁(yè)中使用 svg是很簡(jiǎn)單的，只要你能把 svg圖標(biāo)畫出來(lái)，在網(wǎng)頁(yè)中的呈現(xiàn)完全不是問(wèn)題。

在 Vue中使用 Svg

你完全可以像在 普通網(wǎng)頁(yè)中使用 svg那樣在Vue中使用，不過(guò)，既然已經(jīng)是選擇 vue來(lái)組件化開發(fā)項(xiàng)目了，那么在一堆組件中，穿插一大段的 svg畢竟有點(diǎn)不太好看。

一種解決方法是，利用 svg的 use標(biāo)簽，不直接在主頁(yè)面中編寫繪制svg圖標(biāo)的代碼，而是把這一大段的代碼放到另外的文件中，然后使用 use引用這段繪制圖標(biāo)的代碼即可（好像餓了么移動(dòng)端就是這么干的）。

例如，將所有繪制 svg的代碼放到 svg-icon.vue文件中，所有圖標(biāo)的繪制代碼使用 symbol標(biāo)簽分隔開并單獨(dú)命名，避免錯(cuò)亂，然后將這個(gè)文件當(dāng)做是一個(gè)組件導(dǎo)出，在主頁(yè)面中引入此組件，接著，在需要 使用 svg圖標(biāo)的地方，通過(guò) use標(biāo)簽將其引入。

svg-draw.vue代碼示例如下：

整個(gè) vue組件導(dǎo)出一個(gè)大的 svg，此svg中包含了許多小的圖標(biāo)，類似于精靈圖，每個(gè)圖標(biāo)使用 symbol分隔，并單獨(dú)命名以方便引用。

使用示例如下：

// index.vue
...
 ...

然后，就可以看到網(wǎng)頁(yè)中順利出現(xiàn)對(duì)應(yīng)的 svg圖標(biāo)了：

不過(guò)，還有個(gè)問(wèn)題，如果當(dāng)前網(wǎng)站需要用到的 svg圖標(biāo)很多，勢(shì)必就造成 svg-icon.vue這個(gè)文件體積逐漸變大，當(dāng)前網(wǎng)頁(yè)命名只需要用到其中一個(gè) svg圖標(biāo)，結(jié)果你把幾百個(gè)圖標(biāo)的 svg代碼，全部加載了進(jìn)來(lái)，明顯不太友好，最好是能夠按需加載，當(dāng)前網(wǎng)頁(yè)需要哪些圖標(biāo)就加載哪些，甚至一些可能出現(xiàn)可能不出現(xiàn)的圖標(biāo)，也在該出現(xiàn)時(shí)再加載，如果沒(méi)有機(jī)會(huì)出現(xiàn)，那么永遠(yuǎn)不加載。

Github上有很多此類的插件，我介紹一個(gè)我覺(jué)得很好用的插件：vue-svg-icon，簡(jiǎn)單易用、快速上手。

首先，安裝此插件，就不多說(shuō)了，安裝完成后，在項(xiàng)目的入口文件中注冊(cè)此插件以方便全局調(diào)用：

import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)

然后在根目錄的 /src目錄下新建一個(gè) svg目錄（目前這個(gè)路徑只能是這樣，不可配置為其他路徑和目錄），然后再這個(gè)目錄中放入你想要使用的 svg圖標(biāo)的 svg文件即可。

例如一個(gè)微信圖標(biāo)的 svg如下：

將上述代碼保存到一個(gè) .svg的文件中，例如 wx.svg，放到 /src/svg目錄中，這樣就完成了準(zhǔn)備工作。

接著，想要使用的話，很簡(jiǎn)單，直接在 vue組件中這么寫：

刷新頁(yè)面時(shí)，打開控制臺(tái)，可以看到頁(yè)面中加載了這個(gè) wx.svg文件，這樣，就實(shí)現(xiàn)了 svg文件的按需引入。

在 React中使用 Svg

在 React中使用Svg和 vue一樣，同樣存在 3種方案，一種是直接在 react的 reader方法中寫入 svg代碼，第二種則是將所有 svg繪制代碼放到一個(gè)文件中，然后將這個(gè)文件一次性載入，使用 use標(biāo)簽引用響應(yīng)的 svg圖案，第三種則是使用插件按需引入。

第一種直接在 渲染方法中寫入 svg的方法就不多說(shuō)了，第二種也很簡(jiǎn)單 ，和 vue一樣，只不過(guò)寫法上需要注意一下。

render() {
  return (
   
   )
}

主要是需要注意，因?yàn)?react使用 jsx語(yǔ)法，不允許出現(xiàn) - 連字符，所以像 fill-rule這樣的屬性，就必須寫成 fillRule，引用的時(shí)候同樣如此。

// 引用的時(shí)候需要將 `xlink:href` 改寫成 xlinkHref
  
 

第三種按需引入，只加載當(dāng)前需要的 svg形狀，同樣是將每一個(gè) svg圖片作為一個(gè)單獨(dú)的文件保存，然后再需要使用的地方進(jìn)行引用。 Github上有個(gè)項(xiàng)目 react-svg，這個(gè)項(xiàng)目?jī)?nèi)部其實(shí)是對(duì) SVGInjector的包裝，

安裝 react-svg之后，就可以像下面這樣使用了：

import ReactSVG from 'react-svg'

ReactDOM.render(
  console.log(svg)}
  className="example"
 />,
 document.querySelector('.Root')
)

一般都只是在使用小圖標(biāo)的時(shí)候才考慮 svg，而這些小圖標(biāo)一般都比較簡(jiǎn)約，繪制起來(lái)也沒(méi)什么難度，不過(guò)大部分情況下沒(méi)有必要自己來(lái)畫，很多網(wǎng)站都提供svg的圖標(biāo)下載，例如阿里的 iconfont，圖標(biāo)數(shù)量眾多，基本可以滿足絕大部分的需求，另外，類似的網(wǎng)站還有 easyicon 、 icomoon等。

關(guān)于“在React、Vue項(xiàng)目中如何使用SVG”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，使各位可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，請(qǐng)把它分享出去讓更多的人看到。