@kanmu/popcorn-icons

Popcorn (Vandle Design System) で使用するアイコンライブラリ

インストール

yarn add @kanmu/popcorn-icons

Peer Dependencies

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

yarn add react-native-svg

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

使い方

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

• サイズ: 24（幅・高さ）
• 色: currentColor（親要素のテキスト色を継承）

基本的な使用例

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

const MyComponent = () => {
  return (
    <View>
      <Icon name="house" color="#272A32" size={24} />
      <Icon name="magnifyingGlass" color="#A6AAB7" size={24} />
    </View>
  );
};

カスタマイズ例

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

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

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

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

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

Contributing

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

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

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

基本ライセンス

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

ブランドアイコン（商標）の例外

一部のブランドアイコンは商標として保護されており、以下の使用制限があります。 詳細および保護対象のアイコン一覧については LICENSE.md をご確認ください。