Yarn アイコン
thesvg-color:yarn
Yarn アイコン(thesvg-color:yarn)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 518 × 518 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 518 × 518
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="518" height="518" viewBox="0 0 518 518"><path fill="#2c8ebb" d="M259 0c143 0 259 116 259 259S402 518 259 518S0 402 0 259S116 0 259 0"/><path fill="#fff" d="M435.2 337.5c-1.8-14.2-13.8-24-29.2-23.8c-23 .3-42.3 12.2-55.1 20.1c-5 3.1-9.3 5.4-13 7.1c.8-11.6.1-26.8-5.9-43.5c-7.3-20-17.1-32.3-24.1-39.4c8.1-11.8 19.2-29 24.4-55.6c4.5-22.7 3.1-58-7.2-77.8c-2.1-4-5.6-6.9-10-8.1c-1.8-.5-5.2-1.5-11.9.4C293.1 96 289.6 93.8 286.9 92c-5.6-3.6-12.2-4.4-18.4-2.1c-8.3 3-15.4 11-22.1 25.2c-1 2.1-1.9 4.1-2.7 6.1c-12.7.9-32.7 5.5-49.6 23.8c-2.1 2.3-6.2 4-10.5 5.6h.1c-8.8 3.1-12.8 10.3-17.7 23.3c-6.8 18.2.2 36.1 7.1 47.7c-9.4 8.4-21.9 21.8-28.5 37.5c-8.2 19.4-9.1 38.4-8.8 48.7c-7 7.4-17.8 21.3-19 36.9c-1.6 21.8 6.3 36.6 9.8 42c1 1.6 2.1 2.9 3.3 4.2c-.4 2.7-.5 5.6.1 8.6c1.3 7 5.7 12.7 12.4 16.3c13.2 7 31.6 10 45.8 2.9c5.1 5.4 14.4 10.6 31.3 10.6h1c4.3 0 58.9-2.9 74.8-6.8c7.1-1.7 12-4.7 15.2-7.4c10.2-3.2 38.4-12.8 65-30c18.8-12.2 25.3-14.8 39.3-18.2c13.6-3.3 22.1-15.7 20.4-29.4m-23.8 14.7c-16 3.8-24.1 7.3-43.9 20.2c-30.9 20-64.7 29.3-64.7 29.3s-2.8 4.2-10.9 6.1c-14 3.4-66.7 6.3-71.5 6.4c-12.9.1-20.8-3.3-23-8.6c-6.7-16 9.6-23 9.6-23s-3.6-2.2-5.7-4.2c-1.9-1.9-3.9-5.7-4.5-4.3c-2.5 6.1-3.8 21-10.5 27.7c-9.2 9.3-26.6 6.2-36.9.8c-11.3-6 .8-20.1.8-20.1s-6.1 3.6-11-3.8c-4.4-6.8-8.5-18.4-7.4-32.7c1.2-16.3 19.4-32.1 19.4-32.1s-3.2-24.1 7.3-48.8c9.5-22.5 35.1-40.6 35.1-40.6s-21.5-23.8-13.5-45.2c5.2-14 7.3-13.9 9-14.5c6-2.3 11.8-4.8 16.1-9.5c21.5-23.2 48.9-18.8 48.9-18.8s13-39.5 25-31.8c3.7 2.4 17 32 17 32s14.2-8.3 15.8-5.2c8.6 16.7 9.6 48.6 5.8 68c-6.4 32-22.4 49.2-28.8 60c-1.5 2.5 17.2 10.4 29 43.1c10.9 29.9 1.2 55 2.9 57.8c.3.5.4.7.4.7s12.5 1 37.6-14.5c13.4-8.3 29.3-17.6 47.4-17.8c17.5-.3 18.4 20.2 5.2 23.4"/></svg>
Yarn アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:yarn" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:yarn" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:yarn" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--yarn]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:yarn"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:yarn"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/yarn.svg" alt="Yarn アイコン" width="24" height="24">
Yarn アイコン のよくある質問
Yarn アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Yarn アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:yarn" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Yarn アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/yarn.svg" alt="Yarn アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
theSVG Color アイコン をすべて見る →
ICONYZ
