今天完成的結果：

Todo

• tab 頁面切換
• 更改 icon
• 取消 dark mode 模式
• 更換佈景主題

更改 icon

使用 ionicons

ionicons，是由 ionic 團隊製作，裡面有 1300 個專為 Web、iOS、Android 以及桌面應用程式設計的 icon。前面有提到建置 ionic 專案時就會自動打包 ionicons ，所以不用特別安裝。且 ionicons 會根據畫面所的需要的 icon 動態載入每個 icon 的 SVG 文件，這麼做可使畫面初始化時載入的時間更快、節省更多資源並且提高性能。

ionicons 的 icons 分為 App icons 跟 Logos ，App icons 的每個 icon 又分為 filled、outline、sharp 三種樣式，方便開發者做 icon 的點擊狀態更換。

如果要使用 ionicons 的步驟如下：

• 先到 ionicons 找到自己要的 icon 點一下查看名稱。

  

• import 要使用的 icon，如果是減號連接的名稱要改成小駝峰的名稱，例如：paw-outline 改 pwaOutline ，
  也可以到 node_modules/ionicons/icons/index.d.ts 中去查看看。

  import { pwaOutline } from "ionicons/icons";
  

• ion-icon 並 :icon 來使用

  <ion-icon :icon="pwaOutline" />
  

• 要更改 icon 的顏色可以用 color 、 改變大小用 size 屬性來做修改，屬性顏色名稱是指專案的顏色主題，詳細的用法與名稱在此 Ionic color，被 focus 的 icon 預設是使用 primary。以下例子是獲得一個 secondary 顏色的大狗掌！XD

  <ion-icon :icon="pwaOutline" size="large" color="secondary"/>
  

改變 outline icon 的粗細

• 如果要將 outline 的 icon 改粗一點，變得比較可愛一點！可以用 ionic 提供的 --ionicon-stroke-width 這個 CSS 變數來修改，預設是 32px

  ion-icon {
    --ionicon-stroke-width: 16px;
  }
  

使用自定義的 icon

要使用自定義的 SVG 圖像，可以在 ion-icon 使用 src 屬性，以請求外部的 SVG 文件。src 屬性的工作方式與 <img src="..."> 是相同的。此外，外部文件必須是有效的 SVG，不可使用在 SVG 元素內部包含腳本或事件，這是出於安全考慮的限制，以防止潛在的安全漏洞。

<ion-icon src="/assets/location.svg"></ion-icon>

取消 dark mode

ionic 專案建置時會自動套用 dark mode ，想取消的話只要到 src/theme/variables.css 將 @media (prefers-color-scheme: dark) 下方的顏色設定都刪掉即可，如果要改回來，可以到 ionic dark mode 的文件，將 code 加回來～

更換佈景主題

之前有提到在 ionic Color Generator 中可以做調整，調整好的顏色會連同 shade 、 tint 一起更改，也可以瀏覽看看調整後的樣子。

修改好複製下方的 code 在 src/theme/variables.css 中取代貼上就可以了！