[VS Code] vscode-icons : 리액트 아이콘 적용하는 방법

vscode-icons : 리액트 아이콘 적용하는 방법

들어가며

• 비주얼 스튜디오 코드(VS Code)의 @vscode-icons@확장의 @.jsx@ 확장자의 아이콘이 @.js@ 아이콘으로 표시될 때, 수동으로 리액트 아이콘으로 표시되게 하는 방법을 정리해본다.

 

방법

• @[Ctrl]@ + @[Shift]@ + @[P]@를 누른 후, @Command Pallette@를 실행한다.
• @settings@ 를 타이핑 한 후, @Preferences: Open User Settings (JSON)@을 클릭한다.

• 아래의 코드를 추가해준다.

settings.json

{
    "vsicons.associations.files": [
        {
          "icon": "reactjs",
          "extensions": ["jsx"],
          "format": "svg"
        }
    ],
}

 

변경 전	변경 후

 

커스텀 아이콘 적용하기

• @C:\Users\kss34\AppData\Roaming\Code\User\@ 경로에 @vsicons-custom-icons@ 폴더를 만들어주고, 안에 커스텀 아이콘 @.svg@ 파일을 넣어준다.
  • 파일 아이콘일 경우, 파일명을 @file_type_custom-icon-name@(custom-icon-name에 자신이 원하는 아이콘 이름을 넣어준다.)으로 지정해준다. 

 

• 그리고 아래와 같이 @settings.json@ 파일에 입력해준다.

settings.json

{
    "vsicons.associations.files": [
        {
          "icon": "jslogo",   // 아이콘명
          "extensions": ["js"],    // 확장자
          "format": "svg"
        }
    ],
}

 

더 자세한 내용은 아래 참고 사이트의 공식 문서를 확인한다.

참고 사이트

vscode-icons - Visual Studio Marketplace

FineTuning

Custom