[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