Angular 앱에서 SVG 아이콘 관리하기

tldr;

지난 몇 년 동안 SVG는 웹 애플리케이션에서 아이콘을 표시하는 데 선호되는 방법이 되었습니다. SVG는 품질 손실 없이 어떤 크기로든 확장할 수 있고 어떤 색상으로든 변경할 수 있으며 애니메이션할 수 있기 때문입니다. 이는 몇 가지 이점에 불과합니다. 단점은 SVG 코드가 애플리케이션에서 관리 및 처리하기가 약간 어렵다는 것입니다. 다행스럽게도 SVG 아이콘을 이전보다 훨씬 쉽게 사용할 수 있도록 하는 Angular 앱에 이를 지원하는 도구가 있습니다.

SVG 아이콘

앱에 SVG 아이콘을 포함하는 방법에는 두 가지가 있습니다. 페이지 또는 SVG의 XML 코드에 .svg 이미지를 배치할 수 있습니다. XML 코드는 아이콘의 표시를 변경할 수 있도록 하며 내가 선호하는 방법입니다. XML 코드 방법의 문제는 HTML에 아이콘이 무엇인지 알려주지 않고 실수로 변경되기 쉬운 크고 복잡한 XML 조각이 있다는 것입니다. 다음은 SVG 아이콘의 예입니다.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
  <path d="M10.394 2.08a1 1 0 00-.788 0l-7 3a1 1 0 000 1.84L5.25 8.051a.999.999 0 01.356-.257l4-1.714a1 1 0 11.788 1.838L7.667 9.088l1.94.831a1 1 0 00.787 0l7-3a1 1 0 000-1.838l-7-3zM3.31 9.397L5 10.12v4.102a8.969 8.969 0 00-1.05-.174 1 1 0 01-.89-.89 11.115 11.115 0 01.25-3.762zM9.3 16.573A9.026 9.026 0 007 14.935v-3.957l1.818.78a3 3 0 002.364 0l5.508-2.361a11.026 11.026 0 01.25 3.762 1 1 0 01-.89.89 8.968 8.968 0 00-5.35 2.524 1 1 0 01-1.4 0zM6 18a1 1 0 001-1v-2.065a8.935 8.935 0 00-2-.712V17a1 1 0 001 1z" />
</svg>

보시다시피, 이것은 XML의 거대한 조각입니다. 더 나쁜 것은, 당신이 그것을 보는 것만으로는 그것이 무엇을 하는지 알 수 없다는 것입니다. 그리고 그 중 일부가 실수로 삭제되면 어떻게 됩니까? 더 잘 대처할 수 있는 방법이 있겠죠? 글쎄, 우리에게는 행운이 있습니다.

나는 최근에 위에서 SVG 코드를 서비스로 로드한 다음 Angular 요소를 사용하여 템플릿에서 이름별로 아이콘을 출력할 수 있는 angular-svg-icon 이라는 NPM 라이브러리를 발견했습니다. 다음은 프로세스입니다.

// app.component.ts
export class AppCompnent {
  constructor(private _registry: SvgIconRegistryService) {}

  ngOnInit() {
    this._registry.addSvg('academic-cap', '...SVG CODE...');
  }
}

이 코드 조각은 SvgIconRegistryService에서 angular-svg-icon를 가져오고 다음과 같이 템플릿에서 사용할 수 있는 academic-cap라는 새 SVG 아이콘을 선언합니다.

<svg-icon name="academic-cap"></svg-icon>

그러면 원하는 위치에 SVG가 화면에 출력됩니다. svgClass 입력을 사용하여 SVG 스타일을 지정할 수 있습니다.

<svg-icon name="academic-cap" svgClass="bg-red-400 h-20 w-20" ></svg-icon>

이 방법을 사용하면 응용 프로그램에서 SVG 아이콘을 사용하기가 훨씬 쉬워집니다. 그러나 angular-svg-icon-preloader 라이브러리로 개선할 수 있는 것이 하나 더 있습니다. 이 라이브러리는 angular-svg-icon와 함께 사용하도록 되어 있으며 앱이 부트스트랩될 때 JSON 파일에서 SVG 아이콘을 로드합니다. 이렇게 하면 자주 사용하는 여러 아이콘을 로드하기 위해 AppComponent 파일을 지저분하게 만들 필요가 없습니다. 서비스는 자동으로 모든 아이콘을 로드한 다음 위와 같이 템플릿에서 사용할 수 있습니다. 원하는 SVG 데이터 또는 SVG 이미지 파일을 로드할 수 있습니다. JSON 파일을 생성하는 방법은 다음과 같습니다.

// icons.json
{
  "iconImageFiles": [
    {
      "iconName": "badge-check",
      "iconPath": "/assets/icons/badge-check.svg"
    }
  ],
  "customIcons": [
    {
      "iconName": "academic-cap",
      "iconData": "<svg xmlns=\"http://www.w3.org/2000/svg\" > <path d=\"...\" /> </svg>"
    }
  ]
}

JSON 파일에는 iconImageFiles 및 customIcons 의 두 가지 배열 속성이 있습니다. 이 배열의 항목에는 모두 iconName 속성이 있고 아이콘의 SVG 파일 경로인 iconPath 또는 SVG의 XML 데이터인 iconData 속성이 있습니다. 앱이 부트스트랩되면 이러한 아이콘이 로드됩니다. assets 폴더와 같이 앱이 실행 중일 때 액세스할 수 있는 앱의 어딘가에 JSON 파일을 배치한 다음 AngularSvgIconPreloaderModule를 가져올 때 위치를 앱에 알려주세요.

// app.module.ts

@NgModule({
  imports: [
    AngularSvgIconModule.forRoot(),
    AngularSvgIconPreloaderModule.forRoot({
      configUrl: './assets/json/icons.json',
    }),
  ]
})

forRoot 의 AngularSvgIconPreloaderModule 메서드에서 아이콘 파일에 대한 경로가 있는 configUrl 속성이 있는 개체를 제공합니다. 앱에서 아이콘을 미리 로드하는 데 필요한 모든 것입니다. 이제 JSON 파일을 통해 앱의 모든 아이콘을 로드할 필요는 없지만 최소한 가장 많이 사용되는 아이콘은 로드할 수 있습니다. SvgIconRegistryService 를 사용하여 구성 요소의 아이콘을 계속 로드하려면 그렇게 할 수 있습니다.

결론

angular-svg-icon 라이브러리를 발견한 후 SVG 아이콘을 다루는 것이 훨씬 쉽고 편리해졌습니다. 내 템플릿에 더 이상 임의의 SVG 데이터가 없으며 모든 사람이 사용 중인 아이콘을 정확히 알고 있습니다. 이것은 이제부터 내 도구 상자의 일반적인 도구가 될 것입니다.