[TS]material-Icon 추가하여 사용하기

1. 패키지 설치 ( fontsource.org 사이트에서 지원글꼴 확인해서 설치 가능!)

npm i @fontsource/material-icons

 

2. main.tsx 에서 import

import '@fontsource/material-icons` 

 

3. className 에 materail-icons 라고 쓰고 아이콘명을 innerHTML 에 써서 원하는 아이콘을 설정하여 사용

<span className="material-icons">home</span>

 

!! 좀더 편하게 쓰기위해 컴포넌트 형태로 바꾸자!!

/src/components/Icon.tsx

import type { FC, DetailedHTMLProps, HTMLAttributes } from 'react';

type ReactSpanProps = DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>;

export type IconProps = ReactSpanProps & {
	name: string;
};

// className: _className -> _className 타입을 선언한게 아니라 이름을 바꾼거!
// 타입스크립트의 매개변수에서 : 는 이름을 바꿀때 씀!
export const Icon: FC<IconProps> = ({ name, className: _className, ...props }) => {
	const className = ['material-icons', _className].join(' ');

	return (
		<span {...props} className={className}>
			{name}
		</span>
	);
};

 

/src/components/index.ts -> export 용 index

export * from './Icon';

 

4. 사용법

<Icon name='home' className='text-blue' style={{ fontSize: '50px' }} />