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便利ですよね。

カテゴリー: プログラミング

shuho

フロントエンドエンジニアを目指して、html & CSS & javascriptを学習しています。初心者にもわかりやすいように、記事を作成していきます。私自身、独学で技術を身に付けました。progateから勉強し始め、フロントエンドエンジニアになるまでの橋渡しになるよう全力で記事を書いていきます。

0件のコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です