Clover 20 アイコン
energy-icons:clover-20
Clover 20 アイコン(energy-icons:clover-20)は、Energy Icons セットの無料 SVG アイコンです（作者: Sam Passmore）。 20 × 20 のグリッドで描かれています。 Energy Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Energy Icons
- 作者
- Sam Passmore
- ライセンス
- MIT
- サイズ
- 20 × 20
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path fill="currentColor" d="M10.452 2.908c.588-.181 1.176.104 1.568.674l.076.118l.006.01c.56.983.166 1.988-.29 2.767c-.235.4-.516.79-.762 1.139c-.255.36-.466.668-.603.94a.5.5 0 0 1-.894 0c-.137-.272-.348-.58-.603-.94c-.245-.348-.527-.74-.761-1.14c-.457-.778-.851-1.784-.29-2.766l.005-.01c.39-.648 1.017-.985 1.644-.792q.258.081.452.254c.129-.113.28-.201.452-.254M9.5 4.375l-.008-.126c-.033-.266-.172-.365-.238-.385c-.05-.016-.256-.041-.492.351c-.265.475-.137 1.03.289 1.756c.208.355.46.706.716 1.067q.117.168.232.34q.116-.172.233-.34c.256-.361.508-.712.716-1.067c.428-.73.556-1.286.287-1.762c-.235-.386-.439-.36-.489-.345c-.075.023-.246.149-.246.511l-.01.1a.5.5 0 0 1-.98 0z"/><path fill="currentColor" d="M12.364 7.266c.833-.153 1.834-.185 2.558.522l.14.152l.007.007c.476.588.58 1.293.184 1.817a1.2 1.2 0 0 1-.394.337q.097.241.085.512c-.033.656-.566 1.13-1.308 1.274l-.01.002c-1.115.191-1.925-.523-2.501-1.219c-.296-.357-.567-.755-.81-1.105c-.251-.362-.469-.666-.678-.888a.501.501 0 0 1 .306-.84c.303-.036.665-.13 1.09-.245c.41-.112.875-.243 1.331-.326m1.933 1.317c-.355-.415-.92-.486-1.753-.334c-.405.074-.821.192-1.248.308q-.197.053-.399.102l.24.335c.252.364.496.721.758 1.039c.54.651 1.018.96 1.557.87c.444-.088.49-.288.493-.34c.004-.08-.056-.283-.396-.407a.5.5 0 0 1 .244-.964l.098.025l.12.036c.262.06.402-.037.444-.093c.031-.041.125-.224-.158-.577"/><path fill="currentColor" d="M4.937 7.94c.731-.863 1.81-.837 2.699-.674c.456.083.92.214 1.33.326c.426.116.788.21 1.09.244a.5.5 0 0 1 .307.841c-.21.222-.427.525-.679.888c-.242.35-.513.748-.81 1.105c-.575.696-1.386 1.41-2.5 1.219l-.01-.002c-.743-.144-1.275-.618-1.308-1.274q-.013-.271.083-.512a1.2 1.2 0 0 1-.392-.337c-.396-.524-.293-1.228.184-1.816zm2.519.31c-.833-.153-1.4-.083-1.754.333c-.283.352-.189.536-.157.577c.047.063.224.18.564.057a.5.5 0 0 1 .342.94c-.34.123-.4.326-.396.406c.002.051.048.252.492.34c.539.09 1.018-.219 1.557-.87c.263-.318.507-.675.76-1.039q.116-.167.237-.335q-.2-.05-.397-.102c-.427-.116-.843-.234-1.248-.308"/><path fill="currentColor" d="M10.5 8.333c0 4.105.821 7.33 2.416 9.723a.5.5 0 1 1-.832.554C10.344 16.002 9.5 12.562 9.5 8.333z"/></svg>Clover 20 アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="energy-icons:clover-20" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="energy-icons:clover-20" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="energy-icons:clover-20" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[energy-icons--clover-20]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/energy-icons -->
<div class="i-energy-icons:clover-20"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="energy-icons:clover-20"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/energy-icons/clover-20.svg" alt="Clover 20 アイコン" width="24" height="24">Energy Icons の関連アイコン
Clover 20 アイコン のよくある質問
Clover 20 アイコンは商用利用でも無料ですか?
はい。Energy Icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Clover 20 アイコンを使うには?
@iconify/react をインストールして <Icon icon="energy-icons:clover-20" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Clover 20 アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/energy-icons/clover-20.svg" alt="Clover 20 アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。