Clover アイコン
mdi:clover
Clover アイコン(mdi:clover)は、Material Design Icons セットの無料 SVG アイコンです（作者: Pictogrammers）。 24 × 24 のグリッドで描かれています。 Material Design Icons は Apache 2.0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Material Design Icons
- 作者
- Pictogrammers
- ライセンス
- Apache-2.0
- サイズ
- 24 × 24
- カテゴリ
- 自然
- タグ
- luck、nature
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M12 11.18c3.3-3 5-4.54 5-6.49C17 3.19 15.75 2 14.25 2c-.86 0-1.68.36-2.25 1c-.57-.64-1.39-1-2.31-1C8.19 2 7 3.25 7 4.75c0 1.89 1.7 3.43 5 6.43m-.82.82c-3-3.3-4.54-5-6.49-5C3.19 7 2 8.25 2 9.75c0 .86.36 1.68 1 2.25c-.64.57-1 1.39-1 2.31C2 15.81 3.25 17 4.75 17c1.89 0 3.43-1.7 6.43-5m1.65 0c2.99 3.3 4.53 5 6.48 5c1.5 0 2.69-1.25 2.69-2.75c0-.86-.36-1.68-1-2.25c.64-.57 1-1.39 1-2.31C22 8.19 20.75 7 19.25 7c-1.89 0-3.43 1.7-6.42 5m-.83.82c-3.3 3-5 4.54-5 6.49C7 20.81 8.25 22 9.75 22c.86 0 1.68-.36 2.25-1c.57.64 1.39 1 2.31 1c1.5 0 2.69-1.25 2.69-2.75c0-1.89-1.7-3.43-5-6.43"/></svg>
Clover アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="mdi:clover" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="mdi:clover" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="mdi:clover" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[mdi--clover]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/mdi -->
<div class="i-mdi:clover"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="mdi:clover"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/mdi/clover.svg" alt="Clover アイコン" width="24" height="24">
Material Design Icons の関連アイコン
Clover アイコン のよくある質問
Clover アイコンは商用利用でも無料ですか?
はい。Material Design Icons は Apache 2.0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Clover アイコンを使うには?
@iconify/react をインストールして <Icon icon="mdi:clover" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Clover アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/mdi/clover.svg" alt="Clover アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Material Design Icons をすべて見る →
ICONYZ
