React Native - expo icon 사용하기

expo를 설치했다면 자동으로 icon 라이브러리도 설치된다.

Fontisto 의 아이콘 스타일을 import 하고

import { Fontisto } from '@expo/vector-icons';

 

원하는 스타일의 아이콘태그로 사용할 수 있다.

단일 아이콘이라면 사이트에서 복사해다 쓰면 되는데, 나는 날씨에 맞게 아이콘을 표출하고싶어서 이렇게 작성했다.

<Fontisto name={icons[day.weather[0].main]} size={55} color="black" marginLeft={15} />

icon object 생성해서 weather API의 day데이터와 일치하는 아이콘 띄워주기.(물론 사이트에서 일일이 찾음)

const icons = {
  "Clouds" : "cloudy",
  "Rain" : "rains",
  "Clear" : "day-sunny",
  "Snow" : "snowflake",
  "Atmosphere" : "cloudy-gusts",
  "Drizzle" : "rain",
  "Thunderstorm" : "lighting"
}

 

 

https://icons.expo.fyi/Index

@expo/vector-icons directory