Ícone Clover 20
energy-icons:clover-20
O ícone Clover 20 (energy-icons:clover-20) é um ícone SVG gratuito da coleção Energy Icons de Sam Passmore. Ele é desenhado em uma grade de 20 × 20. Energy Icons são publicados sob a licença MIT, que permite o uso em projetos pessoais e comerciais. Copie como código SVG, JSX, Vue ou Svelte, ou baixe o arquivo SVG.
- Coleção
- Energy Icons
- Autor
- Sam Passmore
- Licença
- MIT
- Tamanho
- 20 × 20
Código 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>Como usar o ícone 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 component
<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>Imagem HTML
<img src="https://iconyz.com/api/public/svg/energy-icons/clover-20.svg" alt="Ícone Clover 20" width="24" height="24">Ícones relacionados em Energy Icons
Perguntas frequentes sobre Ícone Clover 20
O ícone Clover 20 é grátis para uso comercial?
Sim. Energy Icons são publicados sob a licença MIT, que permite o uso em projetos pessoais e comerciais.
Como uso o ícone Clover 20 no React?
Instale @iconify/react e renderize <Icon icon="energy-icons:clover-20" />, ou use “Copiar código” nesta página para obter um componente React independente.
Como adiciono o ícone Clover 20 a uma página web?
Vincule o arquivo SVG em uma tag de imagem: <img src="https://iconyz.com/api/public/svg/energy-icons/clover-20.svg" alt="Ícone Clover 20">, ou cole o código SVG diretamente na página para estilizá-lo com CSS.