@kanmu/popcorn-icons

Popcorn Design Kit で使用する React Native 製のアイコンライブラリ

インストール

yarn add @kanmu/popcorn-icons

Peer Dependencies

このパッケージには以下の peer dependencies が必要です。

yarn add react-native-svg

※ React 18 以上、React Native SVG 15 以上が必要です。

使い方

すべてのアイコンコンポーネントは以下のデフォルト値を持ちます。

• サイズ: medium
• 色: dark

size と color は Popcorn のデザイントークンに対応する文字列リテラルです。 型としては IconSize / IconColor を利用できます。

• size: 2xsmall / xsmall / small / medium / large / xlarge
• color: blue / dark / default / disabled / green / inverse / light / link / red / yellow

基本的な使用例

import {Icon} from '@kanmu/popcorn-icons';
import {View} from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Icon color="dark" name="house" size="medium" />
      <Icon color="light" name="magnifyingGlass" size="medium" />
    </View>
  );
};

カスタマイズ例

import {Icon} from '@kanmu/popcorn-icons';
import {View, Pressable, StyleSheet} from 'react-native';

const CustomizedIcons = () => {
  return (
    <View style={styles.container}>
      <Icon
        color="light"
        name="chevronRight"
        opacity={0.7}
        size="large"
        style={{transform: [{rotate: '45deg'}]}}
      />

      <Pressable
        accessibilityRole="button"
        accessibilityLabel="検索を開始"
        accessibilityHint="検索画面を開きます"
        style={styles.iconButton}
      >
        <Icon color="dark" name="magnifyingGlass" size="small"  />
      </Pressable>
    </View>
  );
};

// その他の react-native-svg の Props も使用可能
<Icon name="check" opacity={0.5} />

// style も適用可能
<Icon name="check" style={{marginRight: 8}} />

Contributing

アイコンパッケージの開発に貢献いただける方は、以下のドキュメントを参照してください。

• コントリビューションガイド - 開発環境のセットアップとワークフロー
• リリースガイド - Figma からアイコンを更新してリリースする手順

ライセンスと使用上の注意

基本ライセンス

このパッケージのコードとほとんどのアイコンは MIT License の下で提供されています。

ブランドアイコンの著作権例外

一部のブランドアイコンは著作権が留保されており、Kanmu を表す目的に限って利用が許可されています。 詳細および対象アイコンの一覧については LICENSE.md をご確認ください。