アイコンの差し替え・カスタマイズ

// Mantine のアイコン設定（Tabler Icons を推奨）
import { Button, ActionIcon, TextInput } from '@mantine/core';
import { IconSearch, IconX, IconHeart } from '@tabler/icons-react';

// ボタン内アイコン配置（leftSection / rightSection）
<Button leftSection={<IconSearch size={16} />}>検索</Button>
<Button rightSection={<IconX size={16} />}>クリア</Button>

// テキスト入力フィールドのアイコン
<TextInput
  leftSection={<IconSearch size={16} />}
  rightSection={<IconX size={16} style={{ cursor: 'pointer' }} />}
  placeholder="検索..."
/>

// アイコンのみのボタン（ActionIcon）
<ActionIcon variant="filled" size="lg" aria-label="お気に入り">
  <IconHeart size={20} />
</ActionIcon>

// アイコンのサイズ・色変更（size / color / stroke）
<IconHeart size={32} color="red" stroke={1.5} />

// カスタムSVGは props に直接渡すだけ（currentColor で色を継承）
const CustomIcon = ({ size = 16 }: { size?: number }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="currentColor">
    <path d="..." />
  </svg>
);
<Button leftSection={<CustomIcon size={16} />}>カスタムアイコン</Button>

// Ant Design のアイコン設定（@ant-design/icons）
import { Button, Input } from 'antd';
import { SearchOutlined, CloseOutlined, HeartFilled } from '@ant-design/icons';
import Icon from '@ant-design/icons';

// ボタン内アイコン
<Button icon={<SearchOutlined />} type="primary">検索</Button>
<Button icon={<SearchOutlined />} iconPosition="end">検索（右）</Button>

// アイコンのみのボタン（shape="circle"）
<Button icon={<HeartFilled />} shape="circle" type="text" danger />

// 入力フィールドのアイコン（prefix / suffix）
<Input
  prefix={<SearchOutlined style={{ color: '#aaa' }} />}
  suffix={<CloseOutlined style={{ cursor: 'pointer' }} />}
  placeholder="検索..."
/>

// アイコンのサイズ・色変更（style props）
<HeartFilled style={{ fontSize: '24px', color: '#ff4d4f' }} />

// カスタムSVGアイコン（Icon コンポーネントでラップ）
const CustomSvg = () => (
  <svg width="1em" height="1em" viewBox="0 0 24 24" fill="currentColor">
    <path d="..." />
  </svg>
);
<Icon component={CustomSvg} style={{ fontSize: '20px', color: '#6b8ffe' }} />

// shadcn/ui は Lucide React を推奨（他のライブラリも使用可）
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Search, X, Heart } from 'lucide-react';

// ボタン内アイコン（Tailwind className で配置）
<Button>
  <Search className="mr-2 h-4 w-4" />
  検索
</Button>
<Button>
  検索
  <Search className="ml-2 h-4 w-4" />
</Button>

// アイコンのみのボタン（size="icon"）
<Button variant="ghost" size="icon" aria-label="お気に入り">
  <Heart className="h-4 w-4" />
</Button>

// 入力フィールドのアイコン（wrapper div で実装）
<div className="relative">
  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
  <Input className="pl-9 pr-9" placeholder="検索..." />
  <X className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground cursor-pointer" />
</div>

// アイコンのサイズ・色（className で変更）
<Heart className="h-8 w-8 text-red-500" />

// カスタムSVGはそのまま JSX コンポーネントとして使用
const CustomIcon = ({ className }: { className?: string }) => (
  <svg className={className} viewBox="0 0 24 24" fill="currentColor">
    <path d="..." />
  </svg>
);

// MUI は @mui/icons-material を推奨
import { Button, IconButton, TextField, InputAdornment } from '@mui/material';
import SvgIcon from '@mui/material/SvgIcon';
import SearchIcon from '@mui/icons-material/Search';
import ClearIcon from '@mui/icons-material/Clear';
import FavoriteIcon from '@mui/icons-material/Favorite';

// ボタン内アイコン（startIcon / endIcon）
<Button startIcon={<SearchIcon />} variant="contained">検索</Button>
<Button endIcon={<SearchIcon />} variant="outlined">検索（右）</Button>

// アイコンのみのボタン（IconButton）
<IconButton aria-label="お気に入り" color="error">
  <FavoriteIcon />
</IconButton>

// 入力フィールドのアイコン（InputAdornment）
<TextField
  placeholder="検索..."
  slotProps={{
    input: {
      startAdornment: (
        <InputAdornment position="start"><SearchIcon /></InputAdornment>
      ),
      endAdornment: (
        <InputAdornment position="end">
          <ClearIcon sx={{ cursor: 'pointer' }} />
        </InputAdornment>
      ),
    },
  }}
/>

// アイコンのサイズ・色変更（fontSize prop / sx prop）
<SearchIcon fontSize="large" color="primary" />
<FavoriteIcon sx={{ fontSize: 32, color: '#ff4d4f' }} />

// カスタムSVGアイコン（SvgIcon でラップ）
function CustomIcon(props: React.ComponentProps<typeof SvgIcon>) {
  return (
    <SvgIcon {...props}>
      <path d="..." />
    </SvgIcon>
  );
}
<CustomIcon fontSize="medium" color="action" />