[VSCode] 客製化 Material Icon Theme 對應圖示

Kunyu
Aug 19, 2023

  1. 點選齒輪,然後使用 ctrl + , 開啟設定。

2. 搜尋設定輸入material,會看到 Material-icon-theme Files / Folders 可以透過 setting.json 進行設定,我們將以設定 Folders 為例。

3. settings.json 會儲存 VSCode 的設定,如果你的環境是完全沒有設定過的,那麼當你點擊 Material-icon-theme Folders 在 setting.json 內編輯時,會出現以下內容,我們要在裡面寫客製化的資料夾名稱與對應的Icon Name

{

"material-icon-theme.folders.associations": {

},
}

4. Icon Name 可以在 Material Icon Theme 的 GitHub 找到。

from GitHub — PKief/vscode-material-icon-theme: Available on the VSCode Marketplace
from GitHub — PKief/vscode-material-icon-theme: Available on the VSCode Marketplace

5. 例如我希望CCUCore這個資料夾名稱,可以對應到 Icon Name 為 Core 的這個 Icon,那麼我們就在setting.json寫入以下對應內容。

{
"material-icon-theme.folders.associations": {
"CCUCore":"Core"
},
}

完成了此客製化設定。

6. 額外補充,我自己也有設定material-icon-theme files,替換php預設的圖像,改為小象。

{
"material-icon-theme.files.associations": {
"*.php":"Php_elephant"
},
"material-icon-theme.folders.associations": {
"CCUCore":"Core"
},
}

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Kunyu
Kunyu

Written by Kunyu

軟體工程師,Web系統開發為主。

No responses yet

Write a response