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

프레스턴 램 | ng-conf | 2020년 12월

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 데이터가 없으며 모든 사람이 사용 중인 아이콘을 정확히 알고 있습니다. 이것은 이제부터 내 도구 상자의 일반적인 도구가 될 것입니다.

ng-conf: 뮤지컬이 온다

ng-conf: The Musical은 2021년 4월 22일과 23일에 열리는 ng-conf 사람들의 2일 회의입니다. ng-conf.org에서 확인하세요.