オープンソース情報
アイコンは Lucide アイコン セット (MIT ライセンス) によって提供されます。
120/1904 アイコンを表示していますコピーアクション
「名前をコピー」は lucide-react のインポート用です。「SVG をコピー」は生のマークアップです。「React をコピー」はスタンドアロンの React コンポーネントを生成します。
オープンソースのSVGアイコンセット
このページには、設計および開発ワークフロー向けの高速検索、プレビュー、コピーしやすい出力を備えた完全な Lucide アイコン ライブラリがリストされています。
- lucide-react でアイコン名を直接使用する
- Figma または HTML 用の生の SVG マークアップを取得します
- 依存関係のない使用のために React コンポーネントをコピーする
- クリーンアップのために SVG エディターでアイコンを即座に開く
SVGアイコンの使用例
React、HTML、デザイン ワークフローでこの SVG アイコン ライブラリを使用する一般的な方法。
lucide-react と併用する
名前でインポートし、アイコンを React コンポーネントとしてレンダリングします。
import { Activity } from "lucide-react";
export function IconExample() {
return <Activity className="h-6 w-6" />;
}
HTML 内のインライン SVG
生の SVG マークアップを HTML またはデザイン ツールに直接貼り付けます。
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
スタンドアロン React コンポーネント
追加の依存関係を持たずに、SVG を再利用可能な React コンポーネントにコピーします。
export function ActivityIcon(props: React.SVGProps<SVGSVGElement>) {
return (
<svg {...props} width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
<path d="M4 12h4l2-7 4 14 2-7h4" />
</svg>
);
}
