在 React、Vue項目中使用SVG的方法
在一些現(xiàn)代的扁平化設(shè)計網(wǎng)站，特別是移動端網(wǎng)站，經(jīng)常會包含許多簡單而清晰的小圖標，例如網(wǎng)站圖標、用戶的默認頭像、移動端網(wǎng)頁首頁底部固定的切換欄等，這些小圖標一般都是由美工做好，可能會放到精靈圖上，前端再進行裁切展示。
而實際上，這些簡單的小圖標完全沒必要讓美工來做，前端完全可以通過 svg使用代碼把這些簡單的圖標畫出來，并且，因為這些圖標是用代碼描述出來的，所以如果想要修改這些圖標，例如改變圖標的顏色、圖標的形狀、大小等，都只是改幾行代碼的事情，非常簡單，根本無需美工返工重做。
本文不是闡述如何利用 svg 來進行畫圖的，不了解 svg的可以前往 這里查看， 本文主要說一下如何在網(wǎng)站中使用 svg。
SVG在一般網(wǎng)頁中的使用
svg使用 XML 格式定義圖像，你也可以把它看做是一般的 HTML標簽，鑲嵌在網(wǎng)頁中呈現(xiàn)出某種效果，在網(wǎng)頁中使用svg的基本示例如下：
<body>
<svg width="100" height="100" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" style="fill:pink;stroke-width:1;stroke:rgb(0,0,0)"/>
</svg></body>
效果如下：
可以看到，普通網(wǎng)頁中使用 svg是很簡單的，只要你能把 svg圖標畫出來，在網(wǎng)頁中的呈現(xiàn)完全不是問題。
在 Vue中使用 Svg
你完全可以像在 普通網(wǎng)頁中使用 svg那樣在Vue中使用，不過，既然已經(jīng)是選擇 vue來組件化開發(fā)項目了，那么在一堆組件中，穿插一大段的 svg畢竟有點不太好看。
一種解決方法是，利用 svg的 use標簽，不直接在主頁面中編寫繪制svg圖標的代碼，而是把這一大段的代碼放到另外的文件中，然后使用 use引用這段繪制圖標的代碼即可（好像餓了么移動端就是這么干的）。
例如，將所有繪制 svg的代碼放到 svg-icon.vue文件中，所有圖標的繪制代碼使用 symbol標簽分隔開并單獨命名，避免錯亂，然后將這個文件當做是一個組件導(dǎo)出，在主頁面中引入此組件，接著，在需要 使用 svg圖標的地方，通過 use標簽將其引入。
svg-draw.vue代碼示例如下：
<template>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{position:'absolute',width:0,height:0}}>
<defs>
<symbol viewBox="0 0 26 31" id="location">
<path xmlns="http://www.w3.org/2000/svg" d="M512.571517 65.907059c-204.736964 0-370.715183 165.979242-370.715183 370.724393 0 94.440929 35.320437 180.625824 93.462648 246.083651 1.572822 2.690272 3.50994 5.225001 5.817496 7.531534l240.297878 251.597225c1.279133 1.864464 2.736321 3.64297 4.393054 5.298679 2.111081 2.111081 4.418636 3.90596 6.856152 5.402033 14.458293 10.06524 34.491559 8.658194 47.393403-4.242627 3.26537-3.263323 5.78782-6.987135 7.582699-10.960633L783.610536 690.24766c1.867534-1.866511 3.489474-3.88447 4.876054-6.010901 58.951647-65.640999 94.819552-152.431691 94.819552-247.604284C883.305119 231.886301 717.325877 65.907059 512.571517 65.907059zM512.390391 588.611865c-82.734306 0-149.814074-67.087954-149.814074-149.842727 0-82.753749 67.079768-149.833517 149.814074-149.833517 82.772168 0 149.851936 67.079768 149.851936 149.833517C662.242328 521.523911 595.161536 588.611865 512.390391 588.611865z" fill="#d81e06"/>
</symbol>
</defs>
</svg></template>
整個 vue組件導(dǎo)出一個大的 svg，此svg中包含了許多小的圖標，類似于精靈圖，每個圖標使用 symbol分隔，并單獨命名以方便引用。
使用示例如下：
// index.vue ...<svg class="location-icon"> <use xlink:href="#location" rel="external nofollow" ></use></svg>...
然后，就可以看到網(wǎng)頁中順利出現(xiàn)對應(yīng)的 svg圖標了：
不過，還有個問題，如果當前網(wǎng)站需要用到的 svg圖標很多，勢必就造成 svg-icon.vue這個文件體積逐漸變大，當前網(wǎng)頁命名只需要用到其中一個 svg圖標，結(jié)果你把幾百個圖標的 svg代碼，全部加載了進來，明顯不太友好，最好是能夠按需加載，當前網(wǎng)頁需要哪些圖標就加載哪些，甚至一些可能出現(xiàn)可能不出現(xiàn)的圖標，也在該出現(xiàn)時再加載，如果沒有機會出現(xiàn)，那么永遠不加載。
Github上有很多此類的插件，我介紹一個我覺得很好用的插件：vue-svg-icon，簡單易用、快速上手。
首先，安裝此插件，就不多說了，安裝完成后，在項目的入口文件中注冊此插件以方便全局調(diào)用：
import Icon from 'vue-svg-icon/Icon.vue'Vue.component('icon', Icon)
然后在根目錄的 /src目錄下新建一個 svg目錄（目前這個路徑只能是這樣，不可配置為其他路徑和目錄），然后再這個目錄中放入你想要使用的 svg圖標的 svg文件即可。
例如一個微信圖標的 svg如下：
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg t="1502683891821" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2885" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"> <defs> <style type="text/css"></style> </defs> <path d="M282.6 363.8c-23.7 0-47-15.7-47-38.9 0-23.7 23.3-38.9 46.5-38.9 23.7 0 38.9 15.2 38.9 38.9 0.5 23.2-15.1 38.9-38.4 38.9zM500.4 286c23.7 0 38.9 15.2 38.9 38.9 0 23.3-15.2 38.9-38.9 38.9-23.3 0-47-15.7-47-38.9 0-23.7 23.7-38.9 47-38.9z m167.7 84.5c9.8 0 19.7 0.5 30 1.8-27.3-125.6-161.4-218.7-314.4-218.7C212.4 153.6 72 270.3 72 418.3c0 85.9 46.5 155.6 124.8 210.2l-31.3 93.9 109.1-54.6c38.9 7.6 70.2 15.7 109.1 15.7 9.4 0 19.2-0.5 29.1-1.3-6.3-20.6-9.8-42.9-9.8-65.3-0.1-136 116.6-246.4 265.1-246.4z" p-id="2886"></path><path d="M772.7 573.9c-15.2 0-30.9-15.2-30.9-30.9 0.5-15.7 15.7-31.3 30.9-31.3 23.7 0 39.4 15.7 39.4 31.3-0.1 15.7-15.7 30.9-39.4 30.9z m-171.3 0c-15.2 0-30.9-15.2-30.9-30.9s15.7-31.3 30.9-31.3c23.7 0 38.9 15.7 38.9 31.3 0.5 15.7-15.2 30.9-38.9 30.9zM952 613.3C952 488.5 827.2 387 687.3 387c-148 0-264.7 101.5-264.7 226.3 0 124.8 116.7 225.8 264.7 225.8 31.3 0 62.6-8.1 93.5-15.7l85.9 47-23.7-77.8c62.5-47 109-109.1 109-179.3z" p-id="2887"> </path> </svg>
將上述代碼保存到一個 .svg的文件中，例如 wx.svg，放到 /src/svg目錄中，這樣就完成了準備工作。
接著，想要使用的話，很簡單，直接在 vue組件中這么寫：
<template> <icon class="wx-icon" name="wx"></icon></template>
刷新頁面時，打開控制臺，可以看到頁面中加載了這個 wx.svg文件，這樣，就實現(xiàn)了 svg文件的按需引入。
在 React中使用 Svg
在 React中使用Svg和 vue一樣，同樣存在 3種方案，一種是直接在 react的 reader方法中寫入 svg代碼，第二種則是將所有 svg繪制代碼放到一個文件中，然后將這個文件一次性載入，使用 use標簽引用響應(yīng)的 svg圖案，第三種則是使用插件按需引入。
第一種直接在 渲染方法中寫入 svg的方法就不多說了，第二種也很簡單 ，和 vue一樣，只不過寫法上需要注意一下。
render() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{position:'absolute',width:0,height:0}}>
<defs>
<symbol viewBox="0 0 26 31" id="location">
<path fill="#FFF" fillRule="evenodd" d="M22.116 22.601c-2.329 2.804-7.669 7.827-7.669 7.827-.799.762-2.094.763-2.897-.008 0 0-5.26-4.97-7.643-7.796C1.524 19.8 0 16.89 0 13.194 0 5.908 5.82 0 13 0s13 5.907 13 13.195c0 3.682-1.554 6.602-3.884 9.406zM18 13a5 5 0 1 0-10 0 5 5 0 0 0 10 0z"></path>
</symbol>
<symbol viewBox="0 0 14 8" id="arrow">
<path fill="#FFF" fillRule="evenodd" d="M5.588 6.588c.78.78 2.04.784 2.824 0l5.176-5.176c.78-.78.517-1.412-.582-1.412H.994C-.107 0-.372.628.412 1.412l5.176 5.176z"></path>
</symbol>
</svg>
)
}
主要是需要注意，因為 react使用 jsx語法，不允許出現(xiàn) - 連字符，所以像 fill-rule這樣的屬性，就必須寫成 fillRule，引用的時候同樣如此。
// 引用的時候需要將 `xlink:href` 改寫成 xlinkHref<svg className="arrow-left"> <use xlinkhref="#arrow-left" rel="external nofollow" ></use> </svg>
第三種按需引入，只加載當前需要的 svg形狀，同樣是將每一個 svg圖片作為一個單獨的文件保存，然后再需要使用的地方進行引用。 Github上有個項目 react-svg，這個項目內(nèi)部其實是對 SVGInjector的包裝，
安裝 react-svg之后，就可以像下面這樣使用了：
import ReactSVG from 'react-svg'
ReactDOM.render(
<ReactSVG
path="atomic.svg"
callback={svg => console.log(svg)}
className="example"
/>,
document.querySelector('.Root')
)
一般都只是在使用小圖標的時候才考慮 svg，而這些小圖標一般都比較簡約，繪制起來也沒什么難度，不過大部分情況下沒有必要自己來畫，很多網(wǎng)站都提供svg的圖標下載，例如阿里的 iconfont，圖標數(shù)量眾多，基本可以滿足絕大部分的需求，另外，類似的網(wǎng)站還有 easyicon 、 icomoon等。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2022-04-04
vue-cli3 配置開發(fā)與測試環(huán)境詳解
這篇文章主要介紹了vue-cli3 配置開發(fā)與測試環(huán)境詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了vue移動端自適應(yīng)適配問題，本文通過實例代碼詳解給大家介紹的非常詳細，需要的朋友可以參考下2021-04-04
這篇文章主要介紹了vue element項目引入icon圖標的方法,本文圖文并茂給大家介紹的非常詳細，需要的朋友可以參考下2018-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)無限消息無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了vue父組件異步傳遞props值,子組件接收不到解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要為大家介紹了樣式穿透vue中的scoped示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
本文主要介紹了Vue實現(xiàn)自定義右擊刪除菜單的示例，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2023-02-02
這篇文章主要介紹了Animate.css在vue中的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
使用 Element UI Table 的 slot-scope方法
這篇文章主要介紹了使用 Element UI Table 的 slot-scope方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習或者工作具有一定的參考學(xué)習價值，需要的朋友們下面隨著小編來一起學(xué)習學(xué)習吧2019-10-10