Book Open Lightbulb 32 アイコン
fluent-color:book-open-lightbulb-32
Book Open Lightbulb 32 アイコン(fluent-color:book-open-lightbulb-32)は、Fluent UI System Color Icons セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent UI System Color Icons
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
- タグ
- bookopen、openlightbulb、bookopenlightbulb
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><path fill="url(#SVGZMSXOFBV)" d="M2 6.25A2.25 2.25 0 0 1 4.25 4h8c1.524 0 2.88.718 3.75 1.834L17 16l-1 10.166A4.74 4.74 0 0 1 12.25 28h-8A2.25 2.25 0 0 1 2 25.75z"/><path fill="url(#SVGsl9kvcdm)" d="M27.75 4A2.25 2.25 0 0 1 30 6.25V24h-5v4h-5.25A4.74 4.74 0 0 1 16 26.166L15 16l1-10.166A4.74 4.74 0 0 1 19.75 4z"/><path fill="url(#SVGP0wSeebe)" d="M4 5a1 1 0 0 1 1-1h9.5A1.5 1.5 0 0 1 16 5.5l.5 8.5l-.5 8.5a3.5 3.5 0 0 1-3.5 3.5H5a1 1 0 0 1-1-1z"/><path fill="url(#SVG0bk8XcRp)" d="M28 5a1 1 0 0 0-1-1h-9.5A1.5 1.5 0 0 0 16 5.5v17a3.5 3.5 0 0 0 3.5 3.5H27a1 1 0 0 0 1-1z"/><path fill="url(#SVGUd1frdkI)" d="M28 5a1 1 0 0 0-1-1h-9.5A1.5 1.5 0 0 0 16 5.5v17a3.5 3.5 0 0 0 3.5 3.5H27a1 1 0 0 0 1-1z"/><path fill="url(#SVGB2evKbKh)" d="M27.821 29.393A2 2 0 0 1 25.861 31h-.721a2 2 0 0 1-1.961-1.607L23 28.5l2.5-1l2.5 1z"/><path fill="url(#SVGAqDEmc9z)" d="M27.821 29.393A2 2 0 0 1 25.861 31h-.721a2 2 0 0 1-1.961-1.607L23 28.5l2.5-1l2.5 1z"/><path fill="url(#SVGhAWvmxHX)" d="M25.5 16a5.5 5.5 0 0 1 2.975 10.124L28.3 27l-2.8.5l-2.8-.5l-.176-.876A5.5 5.5 0 0 1 25.5 16"/><path fill="url(#SVGn8XcVcVv)" d="M28.003 28.5h-5l-.3-1.5h5.6z"/><defs><linearGradient id="SVGZMSXOFBV" x1="7.175" x2="11.843" y1="8.491" y2="34.013" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGsl9kvcdm" x1="24.825" x2="20.157" y1="8.491" y2="34.013" gradientUnits="userSpaceOnUse"><stop stop-color="#20ac9d"/><stop offset="1" stop-color="#2052cb"/></linearGradient><linearGradient id="SVGP0wSeebe" x1="2.286" x2="38.978" y1="3.154" y2="18.992" gradientUnits="userSpaceOnUse"><stop stop-color="#b6efff"/><stop offset=".851" stop-color="#58aafe"/></linearGradient><linearGradient id="SVG0bk8XcRp" x1="27.25" x2="-.775" y1="5.375" y2="10.885" gradientUnits="userSpaceOnUse"><stop offset=".123" stop-color="#9deaff"/><stop offset=".616" stop-color="#4894fe"/></linearGradient><linearGradient id="SVGAqDEmc9z" x1="25.5" x2="25.5" y1="27.5" y2="31" gradientUnits="userSpaceOnUse"><stop stop-color="#d34719"/><stop offset="1" stop-color="#d34719" stop-opacity="0"/></linearGradient><linearGradient id="SVGn8XcVcVv" x1="25.06" x2="26.643" y1="27.596" y2="29.961" gradientUnits="userSpaceOnUse"><stop stop-color="#ffc7a3"/><stop offset="1" stop-color="#ff9c70"/></linearGradient><radialGradient id="SVGUd1frdkI" cx="0" cy="0" r="1" gradientTransform="rotate(228.691 19.176 6.985)scale(18.1787 18.0574)" gradientUnits="userSpaceOnUse"><stop offset=".251" stop-color="#2063c3"/><stop offset=".714" stop-color="#8ad6ff" stop-opacity="0"/></radialGradient><radialGradient id="SVGB2evKbKh" cx="0" cy="0" r="1" gradientTransform="rotate(77.327 .827 22.262)scale(14.0876 17.3076)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient><radialGradient id="SVGhAWvmxHX" cx="0" cy="0" r="1" gradientTransform="rotate(73.097 -.793 23.407)scale(12.4386 19.8617)" gradientUnits="userSpaceOnUse"><stop stop-color="#ffe06b"/><stop offset=".376" stop-color="#ffa43d"/><stop offset="1" stop-color="#e67505"/></radialGradient></defs></g></svg>
Book Open Lightbulb 32 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-color:book-open-lightbulb-32" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-color:book-open-lightbulb-32" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-color:book-open-lightbulb-32" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-color--book-open-lightbulb-32]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-color -->
<div class="i-fluent-color:book-open-lightbulb-32"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-color:book-open-lightbulb-32"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-color/book-open-lightbulb-32.svg" alt="Book Open Lightbulb 32 アイコン" width="24" height="24">
Fluent UI System Color Icons の関連アイコン
Book Open Lightbulb 32 アイコン のよくある質問
Book Open Lightbulb 32 アイコンは商用利用でも無料ですか?
はい。Fluent UI System Color Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Book Open Lightbulb 32 アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-color:book-open-lightbulb-32" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Book Open Lightbulb 32 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-color/book-open-lightbulb-32.svg" alt="Book Open Lightbulb 32 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Fluent UI System Color Icons をすべて見る →
