expoを使って、vue Native開発をしている人向けに書きます。
Table of Contents
実際のサンプルコード
そのままコピペしても使えると思います。
<template>
<view>
<FontAwesome name="random" size=25 color="rgb(121, 211, 218)" />
</view>
</template>
<script>
import { Ionicons, FontAwesome } from "@expo/vector-icons";
export default {
components: {
Ionicons,
FontAwesome,
},
};
</script>
解説
Expoのパッケージの中に @expo/vector-icons directoryというものがあります。そこの中のアイコンを使うとき下記のコードを使います。
<template>
<view>
<Ionicons name="md-checkmark-circle" size={32} color="green" />
</view>
</template>
<script>
import Ionicons from "@expo/vector-icons";
export default {
components: {
Ionicons,
},
};
</script>
Font Awesomeも使えます。下記のコードを参照してください。また、font Awesomeの一部しか使えません。使えるものは、こちらをご確認ください。https://icons.expo.fyi/
import { Ionicons, FontAwesome } from "@expo/vector-icons";
export default {
components: {
Ionicons,
FontAwesome,
},
};
</script>
色々なアイコンが使えて、font Awesome便利ですよね。
0件のコメント