react-native-vector-icons

@amazon-devices/react-native-vector-iconsは、Vegaでのreact-native-vector-icons（英語のみ）のサポートを提供します。このライブラリは、ボタン、ロゴ、ナビゲーションバー、タブバーを装飾するために最適な、カスタマイズ可能なベクターアイコンを提供します。これらのアイコンをプロジェクトにシームレスに統合できます。アイコンは適応性が高く、拡大やスタイル設定を簡単に行うことができます。

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなくVega向けReact Nativeアプリで利用できます。これは、アプリが実行時にリンクする自動リンクライブラリとしてデプロイされます。ライブラリとVega向けReact Nativeとの互換性は、ライブラリがターゲットとしているVega向けReact Nativeバージョンとの間でのみ保証されます。

アプリのビルドに使用しているVega向けReact Nativeのバージョンを上げる場合は、ベストプラクティスとして、依存するライブラリのバージョンも上げることをお勧めします。

このライブラリとAPIの詳細については、GitHubリポジトリにあるREADME.md（英語のみ）を参照してください。

インストール

1. package.jsonファイルにJavaScriptライブラリの依存関係を追加します。

   コードをコピー クリップボードにコピーしました。

   "dependencies": {
      ...
      "@amazon-devices/react-native-vector-icons": "~2.0.0"
   }
   

2. npm installコマンドを使用して、依存関係を再インストールします。

3. フォントファイルを<アプリパッケージのルート>/assets/fontsに追加します。

アップグレード

このパッケージをアップグレードするときは、多くの場合、プロジェクトにリンクされているフォントファイルのアップデートも必要になります。自動リンクが有効な場合は、これを再実行するとフォントがアップデートされます。それ以外の場合は、インストールセクションに記載されている手順に従う必要があります。

例

IconExplorer

GitHub react-native-vector-iconsリポジトリのpackages/icon-explorer（英語のみ）でIconExplorerプロジェクトを試してください。そこでは、任意のアイコンを検索することもできます。

基本的な例

以下は、アイコンを返す基本的な例を示しています。

コードをコピー クリップボードにコピーしました。

import Icon from '@amazon-devices/react-native-vector-icons/Ionicons';

function ExampleView(props) {
  return <Icon name="ios-person" size={30} color="#4F8EF7" />;
}

TabBar

以下の例は、TabBarの実装方法を示しています。

これは、react-navigationの例（英語のみ）を抜粋して一部翻訳したものです。

コードをコピー クリップボードにコピーしました。

import { createBottomTabNavigator } from '@amazon-devices/react-navigation/bottom-tabs';
import MaterialCommunityIcons from '@amazon-devices/react-native-vector-icons/MaterialCommunityIcons';

const Tab = createBottomTabNavigator();

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      screenOptions={{
        activeTintColor: '#e91e63',
      }}
    >
      <Tab.Screen
        name="Feed"
        component={Feed}
        options={{
          tabBarLabel: 'ホーム',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="home" color={color} size={size} />
          ),
        }}
      />
      <Tab.Screen
        name="Notifications"
        component={Notifications}
        options={{
          tabBarLabel: '更新情報',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="bell" color={color} size={size} />
          ),
          tabBarBadge: 3,
        }}
      />
      <Tab.Screen
        name="Profile"
        component={Profile}
        options={{
          tabBarLabel: 'プロフィール',
          tabBarIcon: ({ color, size }) => (
            <MaterialCommunityIcons name="account" color={color} size={size} />
          ),
        }}
      />
    </Tab.Navigator>
  );
}

APIサポート

Iconコンポーネント

ライブラリに付属しているアイコンのいずれかを使用するか (たとえば、以下の例では FontAwesome.js のアイコンを使用しています)、独自のカスタムフォントを作成できます。

コードをコピー クリップボードにコピーしました。

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome';
const myIcon = <Icon name="rocket" size={30} color="#900" />;

プロパティ

任意のTextのプロパティ（英語のみ）および以下のプロパティを使用できます。

静的メソッド

スタイル

IconはTextコンポーネントをベースとして構築されているため、ほとんどのスタイルプロパティ（英語のみ）は想定どおりに機能します。よく使用されるものには以下があります。

• backgroundColor
• borderWidth
• borderColor
• borderRadius
• padding
• margin
• color
• fontSize

これらのいくつかを組み合わせると、たとえば次のようなアイコンを作成できます。

Icon.Buttonコンポーネント

左側にアイコンが付いたボタンを作成する便利なコンポーネントです。

コードをコピー クリップボードにコピーしました。

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button
    name="facebook"
    backgroundColor="#3b5998"
    onPress={this.loginWithFacebook}
  >
    Facebookでログイン
  </Icon.Button>
);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{ fontFamily: 'Arial', fontSize: 15 }}>
      Facebookでログイン
    </Text>
  </Icon.Button>
);

プロパティ

以下のプロパティに加えて、Text（英語のみ）、TouchableHighlight（英語のみ）、TouchableWithoutFeedback（英語のみ）のプロパティを使用できます。

PNG画像／ソースオブジェクトとしての使用方法

スケーラブルベクターアイコンではなくビットマップ画像に依存するほかのコンポーネントへの入力として使用するには、以下の方法が便利です。上で説明したように、引数としてname、size、colorを受け取ります。

コードをコピー クリップボードにコピーしました。

Icon.getImageSource('user', 20, 'red').then(source =>
  this.setState({ userIcon: source })
);

レンダリングの不具合を回避するために、代わりに同期メソッドのIcon.getImageSourceSyncを使用することもできます。これはブロッキングメソッドのため、パフォーマンスの低下を招く可能性があることに注意してください。ただし、後続の呼び出しではキャッシュが使用されます。

マルチスタイルフォント

FontAwesome 5など、最近のフォントには複数のスタイルを使用するものがあります。このライブラリは、このようなフォントをサポートしています。使用方法は標準のIconコンポーネントとほとんど同じです。

コードをコピー クリップボードにコピーしました。

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';

const myIcon1 = <Icon name="comments" size={30} color="#900" />; // デフォルトのレギュラーを使用
const myIcon2 = <Icon name="comments" size={30} color="#900" solid />;
const myIcon3 = <Icon name="comments" size={30} color="#900" light />; // FA5 Proのみ

静的メソッド

Iconの静的メソッドはすべて、マルチスタイルフォントでもサポートされます。

style引数を指定しない場合（またはstyle引数が無効な場合）、デフォルトで定義済みのフォールバックが使用されます。

コンポーネント

Icon.Buttonがサポートされます。使用方法はIconと同様です。

コードをコピー クリップボードにコピーしました。

import Icon from '@amazon-devices/react-native-vector-icons/FontAwesome5';
const myButton = (
  <Icon.Button name="facebook" onPress={this.loginWithFacebook} solid>
    Facebookでログイン
  </Icon.Button>
);

カスタムフォント

createIconSet(glyphMap, fontFamily[, fontFile])

glyphMapに基づく独自のカスタムフォントを返します。マップのキーはアイコン名、値はUTF-8文字またはその文字コードです。fontFamilyはフォントの名前であり、ファイル名ではありません。フォント名を調べるには、Font Bookアプリや同様のツールでフォントを開きます。

コードをコピー クリップボードにコピーしました。

import { createIconSet } from '@amazon-devices/react-native-vector-icons';
const glyphMap = { 'icon-name': 1234, test: '∆' };
const Icon = createIconSet(glyphMap, 'FontName', 'font-name.ttf');

createIconSetFromFontello(config[, fontFamily[, fontFile]])

fontello（英語のみ）の構成ファイルに基づいてカスタムフォントを作成する便利なメソッドです。前述の手順に従って忘れずにフォントをインポートし、config.jsonをプロジェクト内の適切な場所に配置してください。

コードをコピー クリップボードにコピーしました。

import { createIconSetFromFontello } from '@amazon-devices/react-native-vector-icons';
import fontelloConfig from './config.json';
const Icon = createIconSetFromFontello(fontelloConfig);

createIconSetFromIcoMoon(config[, fontFamily[, fontFile]])

コードをコピー クリップボードにコピーしました。

import { createIconSetFromIcoMoon } from '@amazon-devices/react-native-vector-icons';
import icoMoonConfig from './selection.json';
const Icon = createIconSetFromIcoMoon(
  icoMoonConfig,
  'LineAwesome',
  'line-awesome.ttf'
);

IcoMoon（英語のみ）でDownloadオプションを使用し、ダウンロードした.zipに含まれている.jsonファイルを使用してください。また、前述の手順に従って.ttfフォントファイルをプロジェクトにインストールする必要もあります。

createMultiStyleIconSet(styles [, options])

コードをコピー クリップボードにコピーしました。

import { createMultiStyleIconSet } from '@amazon-devices/react-native-vector-icons';

/*
 * これはあくまでもサンプルコードです。好みに応じて
 * 自由にグリフマップとスタイルをデザインできます。
 */

import glyphmap from './glyphmap.json';
/*
 * glyphmap = {
 *   "style1": [
 *     "hello",
 *     "world"
 *   ],
 *   "style2": [
 *     "foo",
 *     "bar"
 *   ]
 * }
 */

const glyphKeys = Object.keys(glyphmap); /* ["style1", "style2"] */
const options = {
  defaultStyle: 'style1',
  glyphValidator: (name, style) => glyphKeys.indexOf(name) !== -1,
  fallbackFamily: (name) => {
    for (let i = 0; i < glyphKeys.length; i++) {
      const style = glyphKeys[i];
      if (glyphmap[style].indexOf(name) !== -1) {
        return style;
      }
    }

    /* 常に何らかのファミリーを返します */
    return glyphKeys[0];
  }
};

/*
 * stylesオブジェクトは、後でスタイルとして使用される
 * キーと、フォントに適用するスタイルオブジェクト
 * として使用されるオブジェクトで構成されます。適切な
 * スタイルが選択されるように、スタイルにはフォント
 * ごとに固有の特性を含める必要があります。
 * FontAwesome 5では、5.7.0からスタイルを区別する
 * ためにフォントの太さを使用していますが、その他の
 * プロパティ（fontFamilyなど）も使用できます。
 * これは標準のRNスタイルオブジェクトです。
 */
const styles = {
  style1: {
    fontWeight: '700'
  },
  style2: {
    fontWeight: '100'
  }
};

const Icon = createMultiStyleIconSet(styles, options);

/* デフォルトのスタイル（style1）を使用します */
<Icon name={'hello'} />
<Icon name={'world'} style1 />
/* デフォルトのスタイルはstyle1ですが、これはstyle2にフォールバックします */
<Icon name={'foo'} />
/* これもstyle2にフォールバックします */
<Icon name={'foo'} style1 />
/* style2を普通に使用します */
<Icon name={'bar'} style2 />

アニメーション

React Nativeには、Animatedというアニメーションライブラリが付属しています。アイコンでこれを使用するには、const AnimatedIcon = Animated.createAnimatedComponent(Icon)というコード行でアニメーションコンポーネントを作成するだけです。

サポートされているバージョン

Last updated: 2025年9月30日