Serendie Symbols は、デジタルプロダクトのなかで汎用性高く使える、Serendie らしい 300 種類以上のアイコン集です。Serendie Design Systemの一部として提供されています。

Docs

ドキュメントサイトでは、Serendie Symbols の設計思想をまとめています。アイコンの一覧や検索はこちらを参照してください。

Usage

Serendie Symbols は React 環境を前提としています。

基本的な使い方

各アイコンを個別のコンポーネントとしてインポートする方法です。バンドルサイズの観点から この方法が推奨 されます。

import {
  SerendieSymbolHome,
  SerendieSymbolSettingsFilled,
} from "@serendie/symbols";

function MyComponent() {
  return (
    <>
      <SerendieSymbolHome width={24} height={24} color="green" />
      <SerendieSymbolSettingsFilled width={32} height={32} />
    </>
  );
}

利用可能なコンポーネント:

• アイコン名 (home など) をパスカルケース (Home) に変換し、プレフィックス SerendieSymbol を付けたものがコンポーネント名になります (SerendieSymbolHome)
• 塗りつぶし (filled) の場合は、さらにサフィックス Filled が付きます (SerendieSymbolHomeFilled)
• 利用可能なアイコン名の一覧はこちらを参照してください
• コンポーネントは標準の SVG プロパティ (className, onClick など) を受け付けます

動的読み込みコンポーネント SerendieSymbol

SerendieSymbol コンポーネントを使用して、name や variant プロパティによって表示するアイコンを切り替える方法も提供しています。

import { SerendieSymbol } from "@serendie/symbols";

<SerendieSymbol name="home" size={24} variant="filled" color="blue" />;

利点:

• 動的なアイコン選択: コンポーネントのプロパティ (name, variant) を変更することで、表示するアイコンを実行時に簡単に切り替えられます

トレードオフと注意点:

• バンドルサイズの増加: このコンポーネントを使用する場合、内部的にすべてのアイコンデータを保持しているため、アプリケーションの最終的なバンドルサイズが大きくなります。実際に使用しないアイコンも含まれてしまいます

SerendieSymbolの Props:

• name: アイコン名を指定します。こちらの一覧を参照してください。
• variant?: アイコンには線outlinedと塗りfilledの 2 種類があります。デフォルトはoutlinedです。
• size?: アイコンのサイズを指定します。SVG のwidthとheightに適用されます。デフォルトは24です。
• color?: アイコンの色を指定します。SVG のcolor属性に適用されます。
• その他の SVG のプロパティはコンポーネントを包括している SVG 要素に適用されます。

Development

assets に含まれる SVG ファイルからコンポーネントを生成するため、アイコンを変更した場合は以下のコマンドを実行してください。

npm run generate

License

MIT ライセンスの下で配布されています。 詳しくはLICENSEを参照してください。