Icône Styled Components
thesvg-color:styled-components
L'icône Styled Components (thesvg-color:styled-components) est une icône SVG gratuite de la collection theSVG Color par thesvg.org. Elle est dessinée sur une grille de 318 × 318. Les theSVG Color 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
- theSVG Color
- Auteur
- thesvg.org
- Licence
- MIT
- Taille
- 318 × 318
- Mots-clés
- styledcomponents, component
Code SVG
<svg xmlns="http://www.w3.org/2000/svg" width="318" height="318" viewBox="0 0 318 318"><defs><path id="SVGuxFuEeJV" d="M0 0h318v318H0z"/><mask id="SVGPsU7edNC" width="318" height="318" x="0" y="0" fill="#fff"><use href="#SVGuxFuEeJV"/></mask></defs><g fill="none" fill-rule="evenodd"><use stroke="#4a4a4a" stroke-width="8" href="#SVGuxFuEeJV" mask="url(#SVGPsU7edNC)"/><path fill="#4a4a4a" d="M44.284 229.416c-4.428 0-7.344 2.376-7.344 5.544c0 2.808 1.728 4.68 5.652 5.76c3.564 1.008 4.32 1.512 4.32 3.096c0 1.44-1.332 2.304-3.384 2.304c-1.944 0-3.708-.756-5.184-1.872l-2.304 2.592c1.764 1.584 4.32 2.7 7.596 2.7c4.356 0 8.028-2.088 8.028-6.048c0-3.384-2.196-4.968-6.084-6.012c-3.24-.9-3.996-1.476-3.996-2.736c0-1.152 1.044-1.908 2.88-1.908c1.692 0 3.204.54 4.788 1.548l1.8-2.7c-1.8-1.404-4.032-2.268-6.768-2.268m20.412 15.732l1.62 2.952c-1.368.972-3.096 1.44-4.788 1.44c-3.744-.036-5.724-2.16-5.724-6.228v-10.044h-2.988v-3.312h2.988v-4.212l4.608-.54v4.752h4.428l-.468 3.312h-3.96v9.936c0 1.872.612 2.628 2.016 2.628c.72 0 1.44-.216 2.268-.684m19.62-15.192l-6.192 19.116c-1.44 4.464-4.248 7.344-9.9 7.776l-.468-3.348c3.78-.576 5.004-1.8 6.084-4.5h-1.584l-6.048-19.044h4.896l4.14 15.984l4.32-15.984zm7.308 19.584a7.55 7.55 0 0 0 3.06-.648l-.972-3.24c-.324.108-.648.18-1.08.18c-.756 0-1.08-.432-1.08-1.332v-22.68l-4.608.504v22.32c0 3.132 1.764 4.896 4.68 4.896m21.744-10.512c0 .612-.072 1.368-.108 1.872h-11.952c.324 3.888 2.16 5.148 4.68 5.148c1.692 0 3.096-.54 4.752-1.692l1.908 2.628c-1.872 1.512-4.176 2.556-7.056 2.556c-5.904 0-9.072-3.924-9.072-9.936c0-5.796 3.06-10.188 8.46-10.188c5.328 0 8.388 3.6 8.388 9.612m-4.572-1.116v-.216c0-3.132-1.116-5.004-3.708-5.004c-2.16 0-3.528 1.44-3.78 5.22zm20.124-16.092l4.608.504V249h-4.068l-.324-2.412c-1.152 1.728-2.988 2.952-5.436 2.952c-4.752 0-7.236-3.996-7.236-10.044c0-5.868 2.952-10.08 7.668-10.08c2.016 0 3.6.864 4.788 2.052zm-3.924 24.228c1.692 0 2.844-.828 3.924-2.448v-8.712c-1.008-1.224-2.088-2.016-3.636-2.016c-2.376 0-3.96 2.016-3.96 6.588c0 4.896 1.404 6.588 3.672 6.588M44.44 265.416c-5.472 0-8.892 4.14-8.892 10.224s3.42 9.9 8.928 9.9c2.448 0 4.428-.792 6.156-2.196l-2.052-2.916c-1.404.9-2.412 1.368-3.852 1.368c-2.592 0-4.284-1.62-4.284-6.228c0-4.572 1.62-6.516 4.284-6.516c1.44 0 2.592.432 3.852 1.368l2.052-2.772c-1.8-1.548-3.708-2.232-6.192-2.232m17.316 0c5.616 0 8.928 3.816 8.928 10.044c0 6.012-3.348 10.08-8.964 10.08s-8.964-3.816-8.964-10.08c0-5.976 3.348-10.044 9-10.044m0 3.492c-2.7 0-4.14 2.052-4.14 6.552c0 4.572 1.404 6.588 4.104 6.588s4.104-2.052 4.104-6.588s-1.404-6.552-4.068-6.552m33.444-3.492c-2.52 0-4.284 1.224-5.724 3.204c-.72-2.016-2.376-3.204-4.608-3.204c-2.412 0-4.14 1.116-5.508 3.024l-.36-2.484h-3.996V285h4.608v-13.248c1.044-1.764 2.016-2.88 3.636-2.88c1.116 0 2.088.684 2.088 3.06V285h4.608v-13.248c1.044-1.764 2.016-2.88 3.6-2.88c1.152 0 2.088.684 2.088 3.06V285h4.608v-13.788c0-3.6-2.016-5.796-5.04-5.796m20.268 0c4.968 0 7.056 3.924 7.056 10.008c0 5.832-2.7 10.116-7.524 10.116c-1.944 0-3.6-.684-4.788-2.088v8.892l-4.608.504v-26.892h4.032l.252 2.34c1.512-1.98 3.528-2.88 5.58-2.88m-1.764 16.596c2.52 0 3.996-1.944 3.996-6.552c0-4.824-1.296-6.588-3.6-6.588c-1.62 0-2.988 1.116-3.888 2.592v8.568c.9 1.332 2.052 1.98 3.492 1.98m21.132-16.596c5.616 0 8.928 3.816 8.928 10.044c0 6.012-3.348 10.08-8.964 10.08s-8.964-3.816-8.964-10.08c0-5.976 3.348-10.044 9-10.044m0 3.492c-2.7 0-4.14 2.052-4.14 6.552c0 4.572 1.404 6.588 4.104 6.588s4.104-2.052 4.104-6.588s-1.404-6.552-4.068-6.552m23.4-3.492c-2.412 0-4.32 1.116-5.796 3.024l-.36-2.484h-3.996V285h4.608v-13.248c1.116-1.764 2.34-2.88 3.996-2.88c1.44 0 2.34.684 2.34 3.06V285h4.608v-13.788c0-3.636-1.98-5.796-5.4-5.796m26.388 9.612c0 .612-.072 1.368-.108 1.872h-11.952c.324 3.888 2.16 5.148 4.68 5.148c1.692 0 3.096-.54 4.752-1.692l1.908 2.628c-1.872 1.512-4.176 2.556-7.056 2.556c-5.904 0-9.072-3.924-9.072-9.936c0-5.796 3.06-10.188 8.46-10.188c5.328 0 8.388 3.6 8.388 9.612m-4.572-1.116v-.216c0-3.132-1.116-5.004-3.708-5.004c-2.16 0-3.528 1.44-3.78 5.22zm18.864-8.496c-2.412 0-4.32 1.116-5.796 3.024l-.36-2.484h-3.996V285h4.608v-13.248c1.116-1.764 2.34-2.88 3.996-2.88c1.44 0 2.34.684 2.34 3.06V285h4.608v-13.788c0-3.636-1.98-5.796-5.4-5.796m20.052 15.732c-.828.468-1.548.684-2.268.684c-1.404 0-2.016-.756-2.016-2.628v-9.936h3.96l.468-3.312h-4.428v-4.752l-4.608.54v4.212h-2.988v3.312h2.988v10.044c0 4.068 1.98 6.192 5.724 6.228c1.692 0 3.42-.468 4.788-1.44zm10.224-15.732c-4.428 0-7.344 2.376-7.344 5.544c0 2.808 1.728 4.68 5.652 5.76c3.564 1.008 4.32 1.512 4.32 3.096c0 1.44-1.332 2.304-3.384 2.304c-1.944 0-3.708-.756-5.184-1.872l-2.304 2.592c1.764 1.584 4.32 2.7 7.596 2.7c4.356 0 8.028-2.088 8.028-6.048c0-3.384-2.196-4.968-6.084-6.012c-3.24-.9-3.996-1.476-3.996-2.736c0-1.152 1.044-1.908 2.88-1.908c1.692 0 3.204.54 4.788 1.548l1.8-2.7c-1.8-1.404-4.032-2.268-6.768-2.268M79.8 87.2l-36.2 22.5l36.2 22.9l-3.7 4.6l-37.7-23.6v-7.9l38.1-23.6m189.3 22.7v7.8l-37.7 23.6l-3.7-4.9l36.1-22.6L224.4 86l3.2-4.9"/></g></svg>Comment utiliser l'icône Styled Components
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:styled-components" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:styled-components" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:styled-components" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--styled-components]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:styled-components"></div>Web component
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:styled-components"></iconify-icon>Image HTML
<img src="https://iconyz.com/api/public/svg/thesvg-color/styled-components.svg" alt="Icône Styled Components" width="24" height="24">L'icône Styled Components dans d'autres collections
FAQ : Icône Styled Components
L'icône Styled Components est-elle gratuite pour un usage commercial ?
Oui. Les theSVG Color icons sont publiées sous la licence MIT, qui autorise leur utilisation dans des projets personnels et commerciaux.
Comment utiliser l'icône Styled Components dans React ?
Installez @iconify/react et affichez <Icon icon="thesvg-color:styled-components" />, ou utilisez « Copier le code » sur cette page pour obtenir un composant React autonome.
Comment ajouter l'icône Styled Components à une page web ?
Liez le fichier SVG dans une balise image : <img src="https://iconyz.com/api/public/svg/thesvg-color/styled-components.svg" alt="Icône Styled Components">, ou collez le code SVG directement dans la page pour le styliser en CSS.