Hook アイコン
fluent-emoji:hook
Hook アイコン(fluent-emoji:hook)は、Fluent Emoji セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji
- 作者
- Microsoft Corporation
- ライセンス
- MIT
- サイズ
- 32 × 32
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g fill="none"><g filter="url(#isNQphb)"><path fill="#FFC52D" fill-rule="evenodd" d="M15.346 6.133a4.04 4.04 0 0 1-2.043 3.514a.66.66 0 0 0-.347.564v12.34l.004.007a4.24 4.24 0 1 0 7.54-2.846c-.043-.065-.092-.123-.142-.183c-.172-.205-.352-.418-.274-.94c.163-1.127-.28-1.761-.488-2.059l-.026-.037l-.01-.013a3 3 0 0 0-.105-.142c-.17-.22-.334-.434-.128-.717c.168-.231.582-.266.898-.159a7.541 7.541 0 0 1-3.03 14.445a7.54 7.54 0 0 1-7.536-7.34h-.003V10.21a.66.66 0 0 0-.347-.564a4.04 4.04 0 1 1 6.037-3.513m-4.04 1.986a1.985 1.985 0 1 0 0-3.971a1.985 1.985 0 0 0 0 3.97" clip-rule="evenodd"/></g><g stroke-width=".75" filter="url(#izHkKWd)"><circle cx="11.658" cy="5.869" r="2.941" stroke="url(#iyy6q5d)"/><circle cx="11.658" cy="5.869" r="2.941" stroke="url(#i0ImLrc)"/></g><g filter="url(#ikwIp5c)"><path stroke="url(#iAA63Lb)" d="M11.873 10.029V21.29c-.108 2.2.832 6.6 5.451 6.6"/></g><g filter="url(#isdpIge)"><path stroke="url(#iLhqHBp)" stroke-linecap="round" d="M21.198 17.094c.812.538 2.123 2.224 2.438 4.662c.395 3.049-.932 4.842-2.151 5.757"/></g><defs><linearGradient id="iyy6q5d" x1="14.4" x2="11.922" y1="4.216" y2="6.662" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE461"/><stop offset="1" stop-color="#FFE461" stop-opacity="0"/></linearGradient><linearGradient id="i0ImLrc" x1="9.434" x2="10.94" y1="8.128" y2="7.016" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE461"/><stop offset="1" stop-color="#FFE461" stop-opacity="0"/></linearGradient><linearGradient id="iAA63Lb" x1="10.797" x2="4.711" y1="12.755" y2="24.895" gradientUnits="userSpaceOnUse"><stop offset=".493" stop-color="#FFE461"/><stop offset="1" stop-color="#FFE461" stop-opacity="0"/></linearGradient><linearGradient id="iLhqHBp" x1="20.373" x2="16.574" y1="16.7" y2="20.733" gradientUnits="userSpaceOnUse"><stop stop-color="#FFE461"/><stop offset="1" stop-color="#FFE461" stop-opacity="0"/></linearGradient><filter id="isNQphb" width="18.219" height="28.314" x="7.266" y="1.593" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".75" dy="-.5"/><feGaussianBlur stdDeviation=".5"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 1 0 0 0 0 0.65098 0 0 0 0 0.223529 0 0 0 1 0"/><feBlend in2="shape" result="effect1_innerShadow_18_24711"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset dx=".25" dy="-.15"/><feGaussianBlur stdDeviation=".25"/><feComposite in2="hardAlpha" k2="-1" k3="1" operator="arithmetic"/><feColorMatrix values="0 0 0 0 0.933333 0 0 0 0 0.541176 0 0 0 0 0.392157 0 0 0 1 0"/><feBlend in2="effect1_innerShadow_18_24711" result="effect2_innerShadow_18_24711"/></filter><filter id="izHkKWd" width="8.132" height="8.132" x="7.592" y="1.803" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24711" stdDeviation=".375"/></filter><filter id="ikwIp5c" width="7.959" height="20.36" x="10.365" y="9.029" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24711" stdDeviation=".5"/></filter><filter id="isdpIge" width="5.51" height="13.419" x="19.697" y="15.594" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_18_24711" stdDeviation=".5"/></filter></defs></g></svg>Hook アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji:hook" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji:hook" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji:hook" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji--hook]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji -->
<div class="i-fluent-emoji:hook"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji:hook"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji/hook.svg" alt="Hook アイコン" width="24" height="24">他のアイコンセットの Hook アイコン
Hook アイコン のよくある質問
Hook アイコンは商用利用でも無料ですか?
はい。Fluent Emoji icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Hook アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji:hook" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Hook アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji/hook.svg" alt="Hook アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。