아이콘 구성 요소 만들기

웹 프레임워크에서 아이콘을 사용할 때 fontawesome 와 같이 미리 정의된 컴포넌트를 사용합니다. 하지만 아이콘이 몇 개뿐이거나 사용자 정의 아이콘을 사용하고 싶다면 SVG로 자신만의 컴포넌트를 만드는 방법을 알려 드리겠습니다.

SVG의 경우 매우 멋진 아이콘이 있는 https://iconmonstr.com/에서 가져옵니다.

<script lang="ts">
/* eslint-disable no-unused-vars */

enum IconTypes {
  plus = "M24 9h-9v-9h-6v9h-9v6h9v9h6v-9h9z",
  arrow = "M8.122 24l-4.122-4 8-8-8-8 4.122-4 11.878 12z",
}
type IconTypesString = keyof typeof IconTypes;

type PosTypes = "left" | "down" | "up" | undefined;

export let icon: IconTypesString;

export let height = "24";
export let width = "24";

export let className: string = undefined;
export let position: PosTypes = undefined;

const totalClass = [className, position].join(" ");
</script>

<svg xmlns="http://www.w3.org/2000/svg"
  class={totalClass ? totalClass : undefined}
  width="{width}"
  height="{height}"
  viewBox="0 0 24 24">
  <path d={IconTypes[icon]}/>
</svg>

<style lang="scss">
  .left {
    transform: rotate(180deg);
  }

  .down {
    transform: rotate(90deg);
  }

  .up {
    transform: rotate(-90deg);
  }
</style>

아이콘 목록에 열거형을 유형으로 추가하여 이 구성 요소를 사용할 때 자동 완성에 도움이 됩니다.
아이콘을 반복하지 않는 데 사용하는 변환 CSS 변수는 CSS 부분에서 아이콘을 제어하기 위해 사용자 정의className 소품도 추가했습니다.
너비와 높이가 작동하도록 viewBox를 0 0 24 24로 고정했습니다. 그러나 SVG가 24-24와 다른 경우 너비와 높이로 값을 변경할 수 있습니다. 그 후에 업데이트viewBox해야 합니다.

새 아이콘 구성 요소를 환영합니다.

<Icon icon="arrow" className="arrow" position="left"/>

내용의 중간에 있어야 하는 경우 flex로 감싸면 align-items 가운데를 사용하십시오.