Shopline アイコン
thesvg-color:shopline
Shopline アイコン(thesvg-color:shopline)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 250 × 42 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 250 × 42
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="250" height="42" viewBox="0 0 250 42"><defs><path id="SVGQPhjQePw" d="M0 40h249V0H0z"/></defs><g fill="none" fill-rule="evenodd" transform="translate(1 1)"><path fill="#333f48" d="m0 33.846l4.388-6.444c2.645 2.845 6.752 5.283 11.928 5.283c4.444 0 6.526-2.032 6.526-4.296c0-6.735-21.604-2.032-21.604-16.604C1.238 5.341 6.638 0 15.472 0C21.436 0 26.387 1.858 30.1 5.4l-4.445 6.153c-3.038-2.903-7.089-4.238-10.914-4.238c-3.376 0-5.29 1.51-5.29 3.831C9.452 17.242 31 13.12 31 27.576C31 34.66 26.05 40 15.978 40C8.721 40 3.545 37.503 0 33.846"/><path stroke="#333f48" d="m0 33.846l4.388-6.444c2.645 2.845 6.752 5.283 11.928 5.283c4.444 0 6.526-2.032 6.526-4.296c0-6.735-21.604-2.032-21.604-16.604C1.238 5.341 6.638 0 15.472 0C21.436 0 26.387 1.858 30.1 5.4l-4.445 6.153c-3.038-2.903-7.089-4.238-10.914-4.238c-3.376 0-5.29 1.51-5.29 3.831C9.452 17.242 31 13.12 31 27.576C31 34.66 26.05 40 15.978 40C8.721 40 3.545 37.503 0 33.846z"/><path fill="#333f48" d="M61.897 40V23.57h-17.85V40H36V1h8.047v15.319h17.85V1H70v39z"/><path stroke="#333f48" d="M61.897 40V23.57h-17.85V40H36V1h8.047v15.319h17.85V1H70v39z"/><path fill="#333f48" d="M139.884 13.571c0-3.274-2.406-5.262-5.54-5.262h-8.396v10.466h8.395c3.135 0 5.541-1.988 5.541-5.204M118 40V1h17.463C143.578 1 148 6.73 148 13.571c0 6.783-4.478 12.513-12.537 12.513h-9.515V40z"/><path stroke="#333f48" d="M139.884 13.571c0-3.274-2.406-5.262-5.54-5.262h-8.396v10.466h8.395c3.135 0 5.541-1.988 5.541-5.204zM118 40V1h17.463C143.578 1 148 6.73 148 13.571c0 6.783-4.478 12.513-12.537 12.513h-9.515V40z"/><path fill="#333f48" d="M153 40V1h3.349v35.96H175V40z"/><path stroke="#333f48" d="M153 40V1h3.349v35.96H175V40z"/><mask id="SVGpfFStevQ" fill="#fff"><use href="#SVGQPhjQePw"/></mask><path fill="#333f48" d="M179 40h3V1h-3z" mask="url(#SVGpfFStevQ)"/><path stroke="#333f48" d="M179 40h3V1h-3z" mask="url(#SVGpfFStevQ)"/><path fill="#333f48" d="m214.848 40l-23.64-33.504V40H188V1h3.264l23.528 33.036V1H218v39z" mask="url(#SVGpfFStevQ)"/><path stroke="#333f48" d="m214.848 40l-23.64-33.504V40H188V1h3.264l23.528 33.036V1H218v39z" mask="url(#SVGpfFStevQ)"/><path fill="#333f48" d="M225 40V1h24v3.04h-20.766v14.443h20.369v3.04h-20.369V36.96H249V40z" mask="url(#SVGpfFStevQ)"/><path stroke="#333f48" d="M225 40V1h24v3.04h-20.766v14.443h20.369v3.04h-20.369V36.96H249V40z" mask="url(#SVGpfFStevQ)"/><path fill="#333f48" d="M92.525 13.975c-1.179 0-2.134.98-2.134 2.188s.955 2.187 2.134 2.187c1.18 0 2.135-.98 2.135-2.187c0-1.209-.956-2.188-2.135-2.188m11.432 19.257l-16.334-9.863l-2.756-10.007s-.163-.89-.04-1.332c.078-.253.93-.538.93-.538l10.005-2.864s8.834 4.562 14.895 7.879c1.481 6.67-2.965 14.206-6.7 16.725m-6.354 3.141c-3.167-3.85-9.998-12.032-9.998-12.032l15.83 9.234s-1.378 1.767-5.832 2.798m-6.943-.28c-.599-2.487-2.407-9.885-2.407-9.885l8.517 10.445s-3.779.51-6.11-.56M94.5 1C84.283 1 76 9.506 76 20s8.283 19 18.5 19S113 30.494 113 20S104.717 1 94.5 1" mask="url(#SVGpfFStevQ)"/><path stroke="#333f48" d="M92 14a2 2 0 1 0 0 4a2 2 0 0 0 0-4zm12.053 20l-16.23-10.021l-2.738-10.168s-.161-.905-.04-1.355c.078-.257.924-.546.924-.546L95.91 9s8.777 4.635 14.8 8.005c1.472 6.777-2.946 14.436-6.657 16.995zm-5.948 2C94.904 32.16 88 24 88 24l16 9.21s-1.393 1.761-5.895 2.79zm-7.562.29C89.911 33.702 88 26 88 26l9 10.874s-3.993.53-6.457-.583zM94.5 1C84.283 1 76 9.506 76 20s8.283 19 18.5 19S113 30.494 113 20S104.717 1 94.5 1z" mask="url(#SVGpfFStevQ)"/></g></svg>Shopline アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:shopline" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:shopline" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:shopline" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--shopline]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:shopline"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:shopline"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/shopline.svg" alt="Shopline アイコン" width="24" height="24">Shopline アイコン のよくある質問
Shopline アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Shopline アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:shopline" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Shopline アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/shopline.svg" alt="Shopline アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。