Yarn アイコン
bxl:yarn
Yarn アイコン(bxl:yarn)は、Boxicons Brands セットの無料 SVG アイコンです（作者: Boxicons）。 24 × 24 のグリッドで描かれています。 Boxicons Brands icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Boxicons Brands
- 作者
- Boxicons
- ライセンス
- MIT
- サイズ
- 24 × 24
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M17.68 14.69c-.7 0-1.31.37-1.83.69c-.97.6-1.45.56-1.45.56l-.02-.03c-.07-.11.31-1.08-.11-2.23c-.46-1.26-1.18-1.57-1.12-1.66c.25-.42.86-1.08 1.11-2.32c.15-.75.11-1.98-.22-2.63c-.06-.12-.61.2-.61.2s-.51-1.14-.66-1.24c-.46-.3-.97 1.23-.97 1.23s-1.06-.17-1.89.73c-.17.18-.39.28-.62.37c-.07.02-.15.02-.35.56c-.31.83.52 1.75.52 1.75s-.99.7-1.36 1.57c-.41.95-.28 1.88-.28 1.88s-.7.61-.75 1.24c-.04.55.12 1 .29 1.26c.19.29.42.15.42.15s-.47.54-.03.78c.4.21 1.07.33 1.42-.03c.26-.26.31-.83.41-1.07c.02-.05.1.09.17.17c.08.08.22.16.22.16s-.63.27-.37.89c.08.2.39.34.89.33c.19 0 2.22-.12 2.76-.25c.31-.07.42-.24.42-.24s1.31-.36 2.5-1.13c.76-.5 1.08-.63 1.69-.78c.51-.12.47-.92-.2-.9Z"/><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m6.02 14.17c-.54.13-.79.23-1.52.7c-1.03.66-2.12 1.03-2.51 1.16c-.12.1-.31.22-.59.29c-.61.15-2.72.26-2.89.26h-.04c-.65 0-1.01-.2-1.21-.41c-.55.27-1.26.16-1.77-.11a.9.9 0 0 1-.48-.63a.9.9 0 0 1 0-.33c-.05-.05-.09-.1-.13-.16c-.14-.21-.44-.78-.38-1.62c.05-.6.46-1.14.73-1.42c-.01-.4.02-1.13.34-1.88c.25-.61.74-1.12 1.1-1.45c-.27-.45-.54-1.14-.27-1.84c.19-.5.34-.78.68-.9c.17-.06.32-.13.41-.22c.65-.71 1.42-.88 1.92-.92c.03-.08.07-.15.1-.24c.26-.55.53-.86.85-.97a.78.78 0 0 1 .71.08c.1.07.24.15.63.96c.26-.07.39-.03.46-.02c.17.05.31.16.39.31c.4.76.45 2.13.28 3c-.2 1.03-.63 1.69-.94 2.15c.27.27.65.75.93 1.52c.23.64.26 1.23.23 1.68c.14-.07.31-.15.5-.27c.49-.31 1.24-.76 2.13-.78c.59 0 1.06.37 1.13.92c.07.53-.26 1.01-.79 1.14"/></svg>
Yarn アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="bxl:yarn" width="24" />
Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="bxl:yarn" width="24" />
</template>
Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="bxl:yarn" width="24" />
Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[bxl--yarn]"></span>
UnoCSS
<!-- @unocss/preset-icons + @iconify-json/bxl -->
<div class="i-bxl:yarn"></div>
Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="bxl:yarn"></iconify-icon>
HTML 画像
<img src="https://iconyz.com/api/public/svg/bxl/yarn.svg" alt="Yarn アイコン" width="24" height="24">
Yarn アイコン のよくある質問
Yarn アイコンは商用利用でも無料ですか?
はい。Boxicons Brands icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Yarn アイコンを使うには?
@iconify/react をインストールして <Icon icon="bxl:yarn" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Yarn アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/bxl/yarn.svg" alt="Yarn アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。
Boxicons Brands アイコン をすべて見る →
ICONYZ
