Icône Moon Filled To Sunny Filled Loop Transition
line-md:moon-filled-to-sunny-filled-loop-transition
L'icône Moon Filled To Sunny Filled Loop Transition (line-md:moon-filled-to-sunny-filled-loop-transition) est une icône SVG gratuite de la collection Material Line Icons par Vjacheslav Trushkin. Elle est dessinée sur une grille de 24 × 24. Les Material Line Icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux. Copiez-la en code SVG, JSX, Vue ou Svelte, ou téléchargez le fichier SVG.
- Collection
- Material Line Icons
- Auteur
- Vjacheslav Trushkin
- Licence
- MIT
- Taille
- 24 × 24
- Catégorie
- Météo
- Mots-clés
- moonfilled, filledto, tosunny, sunnyfilled, filledloop, looptransition
Code SVG
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><defs><mask id="SVGvG6RIdLi"><path fill="#fff" d="M12 6c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z"><animate fill="freeze" attributeName="d" dur="0.4s" values="M12 2c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z;M12 6c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z"/></path><path d="M22 -4c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z"><animate fill="freeze" attributeName="d" dur="0.4s" values="M18 -4c5.52 0 10 4.48 10 10c0 5.52 -4.48 10 -10 10c-5.52 0 -10 -4.48 -10 -10c0 -5.52 4.48 -10 10 -10Z;M22 -4c3.31 0 6 2.69 6 6c0 3.31 -2.69 6 -6 6c-3.31 0 -6 -2.69 -6 -6c0 -3.31 2.69 -6 6 -6Z"/><set fill="freeze" attributeName="opacity" begin="0.4s" to="0"/></path></mask></defs><path fill="currentColor" d="M0 0h24v24H0z" mask="url(#SVGvG6RIdLi)"/><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"><path d="M12 21v1M21 12h1M12 3v-1M3 12h-1" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.4s" to="1"/><animate fill="freeze" attributeName="d" begin="0.4s" dur="0.2s" values="M12 19v1M19 12h1M12 5v-1M5 12h-1;M12 21v1M21 12h1M12 3v-1M3 12h-1"/></path><path d="M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5" opacity="0"><animateTransform attributeName="transform" dur="30s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/><set fill="freeze" attributeName="opacity" begin="0.6s" to="1"/><animate fill="freeze" attributeName="d" begin="0.6s" dur="0.2s" values="M17 17l0.5 0.5M17 7l0.5 -0.5M7 7l-0.5 -0.5M7 17l-0.5 0.5;M18.5 18.5l0.5 0.5M18.5 5.5l0.5 -0.5M5.5 5.5l-0.5 -0.5M5.5 18.5l-0.5 0.5"/></path></g></svg>
Comment utiliser l'icône Moon Filled To Sunny Filled Loop Transition
React
import { Icon } from "@iconify/react";
<Icon icon="line-md:moon-filled-to-sunny-filled-loop-transition" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="line-md:moon-filled-to-sunny-filled-loop-transition" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="line-md:moon-filled-to-sunny-filled-loop-transition" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[line-md--moon-filled-to-sunny-filled-loop-transition]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/line-md -->
<div class="i-line-md:moon-filled-to-sunny-filled-loop-transition"></div>
Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="line-md:moon-filled-to-sunny-filled-loop-transition"></iconify-icon>
Image HTML
<img src="https://iconyz.com/api/public/svg/line-md/moon-filled-to-sunny-filled-loop-transition.svg" alt="Icône Moon Filled To Sunny Filled Loop Transition" width="24" height="24">
Icônes similaires dans Material Line Icons
FAQ : Icône Moon Filled To Sunny Filled Loop Transition
L'icône Moon Filled To Sunny Filled Loop Transition est-elle gratuite pour un usage commercial ?
Oui. Les Material Line Icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux.
Comment utiliser l'icône Moon Filled To Sunny Filled Loop Transition dans React ?
Installez @iconify/react et affichez <Icon icon="line-md:moon-filled-to-sunny-filled-loop-transition" />, ou utilisez « Copier le code » sur cette page pour obtenir un composant React autonome.
Comment ajouter l'icône Moon Filled To Sunny Filled Loop Transition à une page web ?
Liez le fichier SVG dans une balise image : <img src="https://iconyz.com/api/public/svg/line-md/moon-filled-to-sunny-filled-loop-transition.svg" alt="Icône Moon Filled To Sunny Filled Loop Transition">, ou collez le code SVG directement dans la page pour le styliser en CSS.
Voir toutes les Material Line Icons →
