react-native-vector-icons

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

このライブラリはシステムにデプロイされるため、別途インストールプロセスを必要とすることなく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のプロパティ（英語のみ）および以下のプロパティを使用します。

メソッド

以下は静的メソッドです。

| メソッド | 説明 | | —— | ———– | | getFontFamily | アイコンをテキストとして取得するために現在使用されているフォントファミリーを返します。使用方法：const fontFamily = Icon.getFontFamily() | | getImageSource | Imageコンポーネントで使用するアイコンのビットマップバージョンのソースを解決するプロミスを返します。使用方法：const source = await Icon.getImageSource(name, size, color) | | getImageSourceSync | Same as getImageSource but synchronous.使用方法：const source = Icon.getImageSourceSync(name, size, color) | | getRawGlyphMap | Returns the raw glyph map of the icon set.使用方法：const glyphMap = Icon.getRawGlyphMap() | | hasIcon | Checks if the name is valid in current icon set.使用方法：const isNameValid = Icon.hasIcon(name)` |

スタイル

IconはTextコンポーネントの上に構築されるため、ほとんどのstyle propertiesは期待どおりに機能します。

次のプロパティを試してください。

• 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を使用することもできます。これはブロッキングメソッドのため、パフォーマンスの低下を招く可能性があることに注意してください。以降の呼び出しではキャッシュが使用されます。

マルチスタイルフォント

react-native-vector-iconsライブラリは、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のメソッドはマルチスタイルフォントでサポートされています。

スタイル引数が渡されない場合、またはスタイル引数が無効な場合、デフォルトで定義済みのフォールバックが使用されます。

コンポーネント

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に基づいて独自のカスタムフォントを返します。keyはアイコン名で、valueはUTF-8文字またはその文字コードです。フォントの名前はfontFamilyですが、これはファイル名ではありません。フォント名を調べるには、Font Book.appや同様のツールでフォントを開きます。

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

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日