Expo Vector Iconsは、Expoが提供するアイコンライブラリです。SVGファイルを直接使うには、個別にアイコンファイルを入手し、
react-native-svg をインストールする必要がありました。Expo Vector Iconsを使うと、追加設定なしで必要なアイコンを利用できます。
利用できるアイコンは、
expo.fyi↗で確認できます。
Expo Vector Iconsをインストールする 🔗
npx create-expo-app でExpoプロジェクトを作ると、Expo Vector Iconsは標準でインストールされています。入っていない場合は、次のコマンドでインストールできます。
まず、
expo.fyi↗で使いたいアイコンを検索します。検索結果でアイコンをクリックすると、2種類のコードが表示されます。
1つ目はインポート用の import { 아이콘 패키지 } from '@expo/vector-icons';、2つ目は表示用の <아이콘 컴포넌트 /> です。両方をコピーしてプロジェクトに貼り付けると、アイコンが表示されます。次はコードと実行結果の例です。
/app/index.tsximport AntDesign from '@expo/vector-icons/AntDesign';
import { SafeAreaView } from 'react-native-safe-area-context';
const App = () => {
return (
<SafeAreaView
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<AntDesign name="checkcircle" size={24} color="black" />
</SafeAreaView>
);
};
export default App;
@expo/vector-iconsには、アイコンとテキストを一緒に使える Icon.Button コンポーネントがあります。次はコードと実行結果の例です。
/app/index.tsximport AntDesign from '@expo/vector-icons/AntDesign';
import { SafeAreaView } from 'react-native-safe-area-context';
const App = () => {
return (
<SafeAreaView
style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}
>
<AntDesign.Button
name="checkcircle"
size={24}
color="white"
backgroundColor={'green'}
onPress={() => console.log('Button Pressed')}
>
Press Me
</AntDesign.Button>
</SafeAreaView>
);
};
export default App;
| Prop | 説明 | 型 | デフォルト値 |
|---|
| name | アイコン名 | string | X |
|---|
| size | アイコンの大きさ | number | 20 |
|---|
| color | アイコンの色 | string | white |
|---|
| backgroundColor | ボタンの背景色 | string | #007AFF |
|---|
| onPress | ボタンを押したときに実行する関数 | () => void | null |
|---|
| borderRadius | ボタンの角の丸み | number | 5 |
|---|
| iconStyle | アイコンのスタイル | StyleProp | {marginRight: 10} |
|---|
Expoには、よく使われるアイコンが標準で用意され、追加設定なしですぐ使えます。特にButtonコンポーネントは、CSSやスタイルを細かく設定せず手軽に使えるので、出番が多そうです。