[ React Native ] Svg Icon Component

react native에서 svg icon을 사용하기 위해 svgIcon component를 생성

---

Initialized

우선 svg icon을 사용하기 위해서 react-native-svg 패키지를 설치해준다.

npm install react-native-svg

 

이후 타입스크립트를 사용하기때문에 types > svg.d.ts파일을 생성

// svg.d.ts
declare module "*.svg" {
    import React from 'react';
    import { SvgProps } from 'react-native-svg';

    const content: React.FC<SvgProps>;
    export default content;
}

 

tsconfig.json에서 types폴더를 include해줘 svg 타입을 인식

"include": ["**/*.ts", "**/*.tsx","types/**/*.d.ts"],

---

Svg Icon 

src > icon > common 폴더를 만들어서 공통으로 사용하는 svg 아이콘은 common폴더에 넣어서 관리

src > icon > index.ts 파일을 만들어 모든 svg icon을 export 해준다.

 

 

index.ts파일에서는 아이콘을 export 하는 용도로 사용

export {default as CheckBoard}  from '@/icon/common/check-board.svg'

---

Svg Component

svg component는 icon들을 전부 import한 후 

props로 전달된 name의 svg icon을 찾아서 렌더링한다.

 

색상은 fill을 안쓸것이기에 stroke만 적용되게 처리했다.

만약 채우기도 고려한다면 fill 속성도 추가하여 처리

import { SvgProps } from "react-native-svg";
import * as Icons from "@/icon";

interface IconProps extends SvgProps {
    name: keyof typeof Icons;
    size?: number;
    color?: string;
}

const SvgIcon = (props: IconProps) => {
    const Icon = Icons[props.name];
    if (!Icon) return null;

    const width = props.size ?? 12;
    const height = props.size ?? 12;
    const color = props.color ?? "black";

    return <Icon width={width} height={height} stroke={color}/>;
};

export default SvgIcon;

 

그럼 실제로 사용하면 아래 화면처럼 원하는 아이콘이 잘 나오게 된다.

<SvgIcon name="CheckBoard" size={20}/>