SVG在React中的運用

在Web的世界當中，SVG并不是什么新的語言，只不過早年前SVG在Web的應用并不太廣泛。愛掏網 - it200.com不過近年來，它在Web的應用越來越廣泛。愛掏網 - it200.com最為常見的就是一些Icon圖標，復雜一點是一些矢量圖（比如不規則的圖形），甚至還可以使用SVG的濾鏡、動效等功能，實現一些復雜的UI效果。愛掏網 - it200.com不過這些并不是今天要和大家聊的主題，今天想和大家聊的是 SVG在前端框架中的應用，比如React框架。愛掏網 - it200.com

在繼續往下閱讀之前，建議你對SVG有一定的了解，如果你在SVG這方面沒有任何的基礎，建議你花點時間閱讀：

• 圖解SVG的核心概念
• SVG之旅
• 編寫 SVG 的指南
• SVG應用指南

如果你運行“create-react-app”構建的項目，其中React的Logo圖就是一個SVG：

在此我們就可以提出第一個問題：如何在React項目中引入SVG? 在回答這個問題之前，我們先來回憶一下，在HTML中是如何引入SVG的。愛掏網 - it200.com

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

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

不過最為常見的還是四種，不過我個人更推薦將SVG代碼內聯到HTML中。愛掏網 - it200.com

回到React的世界中來。愛掏網 - it200.com在項目初始化的時候，在src/目錄下就有一個logo.svg文件，你會發現在App.tsx文件中：

import logo from './logo.svg';

function App() {
    return (
        
        


    );
}

通過import將.svg文件引入進來，并且運用到的src屬性上：

在編譯之后，你會發現上面的使用和在HTML中引入.svg相同：

另外，在React框架上開發項目的話，使用Webpack加載器來加載SVG已經是非常成熟的技術，而且還可以直接將.svg文件作為組件引入到任何React模塊中，并在構建時進行優化。愛掏網 - 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;

編譯出來的代碼也不是加載.svg文件的方式了，而是直接將SVG代碼內聯在頁面的DOM中：

除此之外，我們還可以直接將SVG代碼放到相應的組件模塊中，不過要將SVG代轉換成JSX代碼：

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

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




					
						
						
						
						分享到：
						
						
						
						
						
						
						
						
						
						
						
					

										
						

上一篇：A11Y 101: 構建可訪問性React應用的技巧

							
下一篇：使用React Hooks和WAAPI創建動效