SVG在React中的運(yùn)用

在Web的世界當(dāng)中，SVG并不是什么新的語(yǔ)言，只不過(guò)早年前SVG在Web的應(yīng)用并不太廣泛。愛(ài)掏網(wǎng) - it200.com不過(guò)近年來(lái)，它在Web的應(yīng)用越來(lái)越廣泛。愛(ài)掏網(wǎng) - it200.com最為常見(jiàn)的就是一些Icon圖標(biāo)，復(fù)雜一點(diǎn)是一些矢量圖（比如不規(guī)則的圖形），甚至還可以使用SVG的濾鏡、動(dòng)效等功能，實(shí)現(xiàn)一些復(fù)雜的UI效果。愛(ài)掏網(wǎng) - it200.com不過(guò)這些并不是今天要和大家聊的主題，今天想和大家聊的是 SVG在前端框架中的應(yīng)用，比如React框架。愛(ài)掏網(wǎng) - it200.com

在繼續(xù)往下閱讀之前，建議你對(duì)SVG有一定的了解，如果你在SVG這方面沒(méi)有任何的基礎(chǔ)，建議你花點(diǎn)時(shí)間閱讀：

• 圖解SVG的核心概念
• SVG之旅
• 編寫(xiě) SVG 的指南
• SVG應(yīng)用指南

如果你運(yùn)行“create-react-app”構(gòu)建的項(xiàng)目，其中React的Logo圖就是一個(gè)SVG：

在此我們就可以提出第一個(gè)問(wèn)題：如何在React項(xiàng)目中引入SVG? 在回答這個(gè)問(wèn)題之前，我們先來(lái)回憶一下，在HTML中是如何引入SVG的。愛(ài)掏網(wǎng) - it200.com

在HTML中引入SVG主要方式有：

.logo {
    background-image: url('path/logo.svg')
}

不過(guò)最為常見(jiàn)的還是四種，不過(guò)我個(gè)人更推薦將SVG代碼內(nèi)聯(lián)到HTML中。愛(ài)掏網(wǎng) - it200.com

回到React的世界中來(lái)。愛(ài)掏網(wǎng) - it200.com在項(xiàng)目初始化的時(shí)候，在src/目錄下就有一個(gè)logo.svg文件，你會(huì)發(fā)現(xiàn)在App.tsx文件中：

import logo from './logo.svg';

function App() {
    return (
        
        


    );
}

通過(guò)import將.svg文件引入進(jìn)來(lái)，并且運(yùn)用到的src屬性上：

在編譯之后，你會(huì)發(fā)現(xiàn)上面的使用和在HTML中引入.svg相同：

另外，在React框架上開(kāi)發(fā)項(xiàng)目的話，使用Webpack加載器來(lái)加載SVG已經(jīng)是非常成熟的技術(shù)，而且還可以直接將.svg文件作為組件引入到任何React模塊中，并在構(gòu)建時(shí)進(jìn)行優(yōu)化。愛(ài)掏網(wǎng) - it200.com比如上面的App.tsx修改為：

// App.tsx

import React from 'react';
// import logo from './logo.svg';
import { ReactComponent as ReactLogo } from './logo.svg';
import './App.css';

function App() {
    return (
        
            

                {/*  */}
                

    );
}

export default App;

編譯出來(lái)的代碼也不是加載.svg文件的方式了，而是直接將SVG代碼內(nèi)聯(lián)在頁(yè)面的DOM中：

除此之外，我們還可以直接將SVG代碼放到相應(yīng)的組件模塊中，不過(guò)要將SVG代轉(zhuǎn)換成JSX代碼：

// App.tsx
function App() {
    return (
        
            

                {/*  */}
                {/*  */}
                




					
						
						
						
						分享到：
						
						
						
						
						
						
						
						
						
						
						
					

										
						

上一篇：A11Y 101: 構(gòu)建可訪問(wèn)性React應(yīng)用的技巧

							
下一篇：使用React Hooks和WAAPI創(chuàng)建動(dòng)效