아이콘 만들기

이미 사용하고 싶은 아이콘이 손에 있다면 이 단계를 건너뜁니다.
원하는 도구로 만든 아이콘을 svg 형식으로 저장합니다.

여기서는 figma를 사용했습니다.
여러 도형을 조합하여 만든 경우, flatten이나 outline 의 처리를 하여 svg 파일을 path만의 구성으로 해 두면, 나중에 react native 측에서 아이콘의 색을 자유롭게 바꿀 수 있습니다.

아이콘 작성 예 @figma

여기에서는 예로 꽃 아이콘을 만들어 보겠습니다.

figma로 도형을 결합하여 아이콘 이미지 만들기

Radius 를 변경한 Star 와 그 중심에 맞는 원을 씁니다.

여러 도형을 모두 결합

만들고 싶은 아이콘에 따라 어떤 처리를 선택하는지는 달라집니다만, 이번은 중간을 원으로 빼내고 싶기 때문에, Star 로부터 원을 substract 합니다.

flatten 처리하기

도형과 프레임의 이름을 적절하게 변경하십시오.

이 이름이 svg 의 파일명이나 icomoon 의 아이콘명으로 사용되기도 하기 때문에, 여기에서 바꾸어 두면 나중에 귀찮은 것이 줄어듭니다.

svg 에서 export

배경색을 제거하고 아이콘의 색상을 #000000으로 둡니다.


할 수있는 svg가 여기

<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M29.0184 10.9058C27.2314 7.03141 21.7249 7.03141 19.9379 10.9058L18.8791 13.2011C18.1508 14.7801 16.6544 15.8674 14.9275 16.0721L12.4174 16.3697C8.18041 16.8721 6.47882 22.109 9.61132 25.0059L11.4672 26.7221C12.7438 27.9027 13.3154 29.6619 12.9765 31.3674L12.4839 33.8467C11.6524 38.0316 16.1072 41.2682 19.8302 39.1842L22.0359 37.9495C23.5533 37.1001 25.403 37.1001 26.9204 37.9495L29.1261 39.1842C32.8491 41.2682 37.3039 38.0316 36.4724 33.8467L35.9798 31.3674C35.6409 29.6619 36.2125 27.9027 37.4891 26.7221L39.345 25.0059C42.4775 22.109 40.7759 16.8721 36.5389 16.3697L34.0288 16.0721C32.3019 15.8674 30.8055 14.7801 30.0772 13.2011L29.0184 10.9058ZM24.4782 34.0625C29.4487 34.0625 33.4782 30.2569 33.4782 25.5625C33.4782 20.868 29.4487 17.0624 24.4782 17.0624C19.5076 17.0624 15.4782 20.868 15.4782 25.5625C15.4782 30.2569 19.5076 34.0625 24.4782 34.0625Z" fill="black"/>
</svg>

icomoon으로 아이콘 글꼴 만들기

icomoon을 열고 New Empty Set을 선택합니다.

h tps://이코모온. 이오/아 p/#/세ぇct

svg 파일 드래그 앤 드롭

Generate font

아이콘 글꼴에 넣고 싶은 아이콘을 모두 클릭한 후 Generate font 를 선택

아이콘 글꼴 이름 설정 및 다운로드

다운로드 버튼의 오른쪽 기어로 아이콘 글꼴의 이름을 결정한 다음 다운로드 시작

react native에서 아이콘 사용

공식 Doc

icomoon에서 생성 된 ttf 및 selection.json 배치

프로젝트의 어딘가에 놓습니다. 여기에서는 assets/custom-icon 디렉토리를 만들어 거기에 배치.

assets
└── custom-icon
    ├── flowericon.ttf
    └── selection.json

아이콘을 호출하기 전에 ttf 로드

이 단계를 건너 뛰고 아이콘을 호출하려고하면 ttf가로드 할 수 없으며 오류가 발생했습니다.

샘플 코드

import AppLoading from 'expo-app-loading';
import { useFonts } from 'expo-font';

export default function App() {
   const [fontsLoaded] = useFonts({ 'IcoMoon': require('../assets/custom-icon/flowericon.ttf') });
   if (!fontsLoaded) {
     return <AppLoading />;
   }
} 

아이콘 호출

샘플 코드

import React from 'react';
import { TouchableOpacity, Text } from 'react-native';
import { createIconSetFromIcoMoon } from '@expo/vector-icons';

const Icon = createIconSetFromIcoMoon(
  require('../assets/custom-icon/selection.json'),
  'IcoMoon',
  'flowericon.ttf');

export default function Apptwo() {
  return (
    <View style={styles.container}>
      <TouchableOpacity>
        <Icon name="flower" size={30} style={{ marginBottom: -3 }} color="#ff0101" />
        <Text>flower</Text>
      </TouchableOpacity>
    </View>
  );
}

참고문헌

htps //w w. 미안해. 코 m / b ぉ g / 쿠 s와 m-i 콘 - 흠 ts - ぃ th-re ct-nachi ゔ /
htps : // 코 m / m 가마쿠라 / ms / 631099303104823dcb79