2022 第31週 學習筆記：在 react 專案透過 @svgr/webpack 引用 .svg 檔案
總結
記錄一下如何透過 @svgr/webpack 在 React 專案中操作 .svg 檔案，使用 @svgr/webpack 的好處是「同一份 .svg 檔案，可以選擇以『元件』或『路徑』的格式來使用」
程式碼
筆記
svgr.react-app-env.d.ts- 第 7 行：要將 svg 檔案以 React 元件形式匯入時，需以
ReactComponent的名稱進行 import - 第 9 行：設定
ReactComponent可以接受titleprops；如果對ReactComponent傳入 title 則最終渲染到畫面上的 svg tag 會包覆 title 字串 - 第 12 行：預設匯出的形式是
src字串
- 第 7 行：要將 svg 檔案以 React 元件形式匯入時，需以
svgr.app.tsx- 第 8 行：以元件形式匯入的
svg檔案可透過classNames來進行 css 樣式設定 - 第 10 行：也可直接將尺寸（width, height）與顏色（fill）以
props形式傳遞給元件；透過 props 傳入的樣式會覆寫掉 svg 檔案原本的設定（可參考final.html兩種 svg tag 的差異） - 第 11 行：以
src形式匯入svg檔案，可直接用於img src或background-image url上
- 第 8 行：以元件形式匯入的
關於 svg tag 中的 title
MDN: Text in a
<title>element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with anaria-labelledbyattribute rather than using the<title>element.
如果有提供的話，瀏覽器會將其應用於 tooltip 的展示文字；但（參考 MDN 表格） FireFox 以外的支援度並不明朗
關於 react-app-env.d.ts
This file references TypeScript types declarations that are specific to projects started with Create React App. These type declarations add support for importing resource files such as
bmp,gif,jpeg,jpg,png,webp, andsvg.
其實就是各種格式的型別定義集合
關於 Triple-Slash Directives
/// <reference types="..." />Triple-slash directives are single-line comments containing a single XML tag. The contents of the comment are used as compiler directives. Triple-slash references instruct the compiler to include additional files in the compilation process.
a
/// <reference types="..." />directive declares a dependency on a package. For example, including/// <reference types="node" />in a declaration file declares that this file uses names declared in@types/node/index.d.ts;and thus, this package needs to be included in the compilation along with the declaration file.
提示編譯器在執行編譯時，需要額外引用哪些套件的型別定義檔案