Cucumber アイコン
fluent-emoji-high-contrast:cucumber
Cucumber アイコン(fluent-emoji-high-contrast:cucumber)は、Fluent Emoji High Contrast セットの無料 SVG アイコンです（作者: Microsoft Corporation）。 32 × 32 のグリッドで描かれています。 Fluent Emoji High Contrast icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Fluent Emoji High Contrast
- 作者
- 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="currentColor"><path d="M22.35 13.49a1.14 1.14 0 1 0 0-2.28a1.14 1.14 0 0 0 0 2.28m-2.55 5.92a1.14 1.14 0 1 1-2.28 0a1.14 1.14 0 0 1 2.28 0m-6.81 4a1.14 1.14 0 1 1-2.28 0a1.14 1.14 0 0 1 2.28 0"/><path d="M23.58 1a6.9 6.9 0 0 0-6.9 6.9q0 .819-.142 1.59a2.4 2.4 0 0 0-1.488 2.22c0 .354.079.686.214.984a8.8 8.8 0 0 1-2.576 2.576a2.41 2.41 0 0 0-3.549 1.338q-.61.091-1.239.092A6.9 6.9 0 0 0 1 23.6c0 3.812 3.088 6.9 6.9 6.9q1.472-.002 2.899-.188a2.4 2.4 0 0 0 3.927-.896a22.5 22.5 0 0 0 7.417-4.024q.14.018.287.018a2.41 2.41 0 0 0 2.402-2.607a22.8 22.8 0 0 0 4.19-6.947a2.402 2.402 0 0 0 1.066-3.738q.392-2.06.392-4.218c0-3.812-3.088-6.9-6.9-6.9m-4.9 6.9c0-2.708 2.192-4.9 4.9-4.9s4.9 2.192 4.9 4.9c0 1.491-.153 2.94-.457 4.337l-.142.653l.549.381a.4.4 0 0 1 .17.329c0 .211-.167.39-.384.402l-.667.035l-.222.63a20.8 20.8 0 0 1-4.313 7.166l-.416.452l.216.576a.408.408 0 0 1-.543.514l-.567-.233l-.465.399a20.5 20.5 0 0 1-7.645 4.128l-.704.202l-.02.733a.396.396 0 0 1-.4.386a.4.4 0 0 1-.354-.213l-.332-.636l-.708.11c-1.04.163-2.1.249-3.176.249A4.9 4.9 0 0 1 3 23.6c0-2.708 2.192-4.9 4.9-4.9c.822 0 1.604-.1 2.352-.263l1.008-.219l-.229-.917a.41.41 0 0 1 .409-.381c.13 0 .252.061.337.176l.52.7l.765-.42a10.85 10.85 0 0 0 4.25-4.208l.355-.633l-.492-.533a.43.43 0 0 1-.125-.292c0-.211.167-.39.384-.402l.73-.039l.184-.708c.222-.856.332-1.75.332-2.661"/></g></svg>
Cucumber アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="fluent-emoji-high-contrast:cucumber" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="fluent-emoji-high-contrast:cucumber" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="fluent-emoji-high-contrast:cucumber" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[fluent-emoji-high-contrast--cucumber]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/fluent-emoji-high-contrast -->
<div class="i-fluent-emoji-high-contrast:cucumber"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="fluent-emoji-high-contrast:cucumber"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/cucumber.svg" alt="Cucumber アイコン" width="24" height="24">
Cucumber アイコン のよくある質問
Cucumber アイコンは商用利用でも無料ですか?
はい。Fluent Emoji High Contrast icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Cucumber アイコンを使うには?
@iconify/react をインストールして <Icon icon="fluent-emoji-high-contrast:cucumber" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Cucumber アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/fluent-emoji-high-contrast/cucumber.svg" alt="Cucumber アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Fluent Emoji High Contrast アイコン をすべて見る →
ICONYZ
