SVG Shapes Gallery
BitFlapのコーポレートデザインで使える、汎用SVGシェイプライブラリ。
（Flutterアプリでも使い込めます）
Star
<Star />
Moon
<Moon />
Sun
<Sun />
Heart
<Heart />
Lightning
<Lightning />
Cloud
<Cloud />
Sparkle
<Sparkle />
Diamond
<Diamond />
Circle
<Circle />
Check
<Check />
Shield
<Shield />
Leaf
<Leaf />
Chat
<Chat />
Target
<Target />
Tree
<Tree />
Mountain
<Mountain />
WaterDrop
<WaterDrop />
Fire
<Fire />
使い方ガイド
A Web (Astro)での使い方
import Star from '@/components/shapes/Star.astro';
<!-- classNameで色とサイズを渡す -->
<Star class="w-12 h-12 text-yellow-400" />
<!-- classNameで色とサイズを渡す -->
<Star class="w-12 h-12 text-yellow-400" />
F アプリ (Flutter)での使い方
// 1. SVGファイルの中身をFlutterのassets/icons/star.svgなどに保存
// 2. flutter_svgパッケージで呼び出す
SvgPicture.asset(
'assets/icons/star.svg',
width: 48,
height: 48,
colorFilter: ColorFilter.mode(
Colors.yellow[400]!,
BlendMode.srcIn,
),
)
// 2. flutter_svgパッケージで呼び出す
SvgPicture.asset(
'assets/icons/star.svg',
width: 48,
height: 48,
colorFilter: ColorFilter.mode(
Colors.yellow[400]!,
BlendMode.srcIn,
),
)