Serendie Symbols

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

Docs

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

Usage

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

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

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

Props

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

Development

scripts/generateSymbolNames.js

• assets/outlinedとassets/filledにあるアイコンの名前を生成するスクリプト
• ビルド時に実行されsrc/generated/symbolNames.tsを更新します
• npm run generate-symbol-namesで手動実行することもできます

License

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