React Native에서 Material Symbols 사용하기

김형석·2023년 10월 18일

Material Symbols RN react native

서론

이 방법은 제가 이틀 동안 웹 서핑을 진행하여 간신히 찾은 방법입니다. 칭찬해주세요.
이와 관련한 npm 패키지를 제작중이나, 완성까지는 시간이 오래 걸릴 것 같습니다.

참고

이 방법은 제가 찾은 임의의 방법으로 Material Symbols를 사용하는 올바른 방법이 아닐 수도 있습니다.

본론

파일 다운로드

구글 드라이브에서 Icon Style에 따라 ...Normal.ttf 와 ...Filled.ttf 파일 두개를 다운로드 받아줍니다.

ex) Material Symbols Outlined를 사용하신다면,
MaterialSymbolsOutlinedNormal.ttf와 MaterialSymbolsOutlinedFilled.ttf를 다운받아줍니다.

ps) 구글 드라이브 글자가 링크 입니다~ 안보이시는 분들은
https://drive.google.com/drive/folders/1DFb1meg8-WgmF2xzSekLloVzFmhL7-SD?usp=sharing
로 가주세요~

어셋 설정 [자세한 설명]

프로젝트 폴더 최상단에 "assets" 폴더를 만듭니다.
내부에 fonts 폴더를 만듭니다.fonts 폴더 안에 다운로드 받은 파일을 넣어주세요, 저는 Material Symbols Rounded를 사용하였습니다.
! 아래 보이는 SUIT와 같이 다른 폰트 파일과 같이 존재해도 됩니다 !
프로젝트 폴더 최상단에 react-native.config.js 파일을 생성합니다.
react-native.config.js 파일을 열고, 아래 코드를 추가합니다.
assets: ['./assets/fonts/'],
터미널로 프로젝트 폴더로 이동한 다음
아래 명령어를 입력해주세요
npx react-native-asset
잘 실행되면 아무것도 안뜨거나 로그만 대충 나옵니다. 에러만 안뜨면 어셋 설정까지는 완료입니다!

사용하기

프로젝트 폴더의 적당한 곳에 icon.tsx 파일을 만들어줍시다, 저는 utils 폴더로 했는데, 어디로 하던 상관없습니다.

파일 안에 아래 코드를 복붙해주시면 됩니다.

import React from 'react';
import {Text, TextStyle, View} from 'react-native';
import Color from './color';

export interface IconProps {
  icon: string;
  size?: number;
  fill?: boolean;
  weight?: TextStyle['fontWeight'];
  color?: string;
}

export const Icon = ({
  icon,
  size = 24,
  fill = false,
  weight = '400',
  color = Color.black,
}: IconProps): JSX.Element => {
  return (
    <View
      style={{
        flex: 0,
        width: size,
        height: size,
        overflow: 'hidden',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <Text
        style={{
          // import font as PostScript
          fontFamily: fill
            ? 'MaterialSymbolsRounded-Filled'
            : 'MaterialSymbolsRounded-Normal',
          fontSize: size,
          fontWeight: weight,
          color: color,
          lineHeight: size * 1.1,
        }}>
        {icon}
      </Text>
    </View>
  );
};

대충 이렇게 보입니다.

! 여기서 Rounded가 아닌 다른 스타일을 쓸 분은 !

! 본인의 스타일대로 변경해야합니다 !

Material Symbols Outlined

Material Symbols Sharp

먼저 https://fonts.google.com/icons 에 가서

원하시는 아이콘을 찾으신 후

사용하실 파일로 가서

import 한 후
<Icon icon="home" fill={true} size={24} weight="400" color="white" />

이처럼 코드를 작성하시면

요로코롬 작동하는걸 보실 수 있습니다.

참고

icon : 아이콘 이름 string
fill : 아이콘 채우기 스타일 boolean
size : 아이콘 크기 number
weight : 아이콘 두께 "100" | "200" | ... "800" | "900"
color : 아이콘 색상 string

결론

제가 정말 며칠동안 검색을 하며 찾은 방법이긴 하나 사실 원래는 저 TTF 파일 안에 Normal과 Fill 옵션이 다 있습니다.
만약 home 아이콘에 fill 옵션을 넣고 싶다면 home.fill 로 사용하면 되는데, text로 아이콘을 불러오기 때문에 home.fill을 하면 home 아이콘과 .fill 글자만 뜹니다.