在React中加入 svg 圖檔

筆記兩種方法:

• Part1 絕對路徑載入 svg 圖檔 使用<object>標籤
• Part2 使用svg library => svg 會被渲染成 React 元件 (效能較優)
  • Part2-1 svgr
  • Part2-2 svg-react-loader
• Part3 絕對路徑載入 svg 圖檔 ** 使用<span>標籤

前提 !!此create-react-app 專案使用絕對路徑:

參考資料:

• stack overflow
• React 官網
• Making Life Easier with Absolute Imports - React in Javascript and Typescript
• jsconfig Options

在專案資料夾內，新建jsconfig.json檔案

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

chatGTP解釋:

Part1 絕對路徑載入 svg 圖檔

根路徑是src資料夾，所以svg圖檔路徑從assets開始寫起。避免相對路徑的不易維護寫法。
這邊使用<object>標籤，帶有路徑的變數放在 屬性 data={變數} 內

import plusIcon from "assets/icons/plus.svg"; 
// import plusIcon from "../../../assets/icons/plus.svg";

Part3 絕對路徑載入 svg 圖檔-使用<span>標籤