Svelte アイコン

Q: Svelte アイコンは商用利用でも無料ですか?

はい。Simple Icons は CC0 1.0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。

simple-icons:svelte

Svelte アイコン(simple-icons:svelte)は、Simple Icons セットの無料 SVG アイコンです（作者: Simple Icons Collaborators）。 24 × 24 のグリッドで描かれています。 Simple Icons は CC0 1.0 ライセンスで公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。

アイコンセット: Simple Icons
作者: Simple Icons Collaborators
ライセンス: CC0-1.0
サイズ: 24 × 24

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="currentColor" d="M10.354 21.125a4.44 4.44 0 0 1-4.765-1.767a4.1 4.1 0 0 1-.703-3.107a4 4 0 0 1 .134-.522l.105-.321l.287.21a7.2 7.2 0 0 0 2.186 1.092l.208.063l-.02.208a1.25 1.25 0 0 0 .226.83a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .343-.15l5.59-3.562a1.16 1.16 0 0 0 .524-.778a1.24 1.24 0 0 0-.211-.937a1.34 1.34 0 0 0-1.435-.533a1.2 1.2 0 0 0-.343.15l-2.133 1.36a4 4 0 0 1-1.135.499a4.44 4.44 0 0 1-4.765-1.766a4.1 4.1 0 0 1-.702-3.108a3.86 3.86 0 0 1 1.742-2.582l5.589-3.563a4 4 0 0 1 1.135-.499a4.44 4.44 0 0 1 4.765 1.767a4.1 4.1 0 0 1 .703 3.107a4 4 0 0 1-.134.522l-.105.321l-.286-.21a7.2 7.2 0 0 0-2.187-1.093l-.208-.063l.02-.207a1.25 1.25 0 0 0-.226-.831a1.34 1.34 0 0 0-1.435-.532a1.2 1.2 0 0 0-.343.15L8.62 9.368a1.16 1.16 0 0 0-.524.778a1.24 1.24 0 0 0 .211.937a1.34 1.34 0 0 0 1.435.533a1.2 1.2 0 0 0 .344-.151l2.132-1.36a4 4 0 0 1 1.135-.498a4.44 4.44 0 0 1 4.765 1.766a4.1 4.1 0 0 1 .702 3.108a3.86 3.86 0 0 1-1.742 2.583l-5.589 3.562a4 4 0 0 1-1.135.499m10.358-17.95C18.484-.015 14.082-.96 10.9 1.068L5.31 4.63a6.4 6.4 0 0 0-2.896 4.295a6.75 6.75 0 0 0 .666 4.336a6.4 6.4 0 0 0-.96 2.396a6.83 6.83 0 0 0 1.168 5.167c2.229 3.19 6.63 4.135 9.812 2.108l5.59-3.562a6.4 6.4 0 0 0 2.896-4.295a6.76 6.76 0 0 0-.665-4.336a6.4 6.4 0 0 0 .958-2.396a6.83 6.83 0 0 0-1.167-5.168"/></svg>

Svelte アイコンの使い方

React

import { Icon } from "@iconify/react";

<Icon icon="simple-icons:svelte" width="24" />

Vue

<script setup>
import { Icon } from "@iconify/vue";
</script>

<template>
  <Icon icon="simple-icons:svelte" width="24" />
</template>

Svelte

<script>
  import Icon from "@iconify/svelte";
</script>

<Icon icon="simple-icons:svelte" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[simple-icons--svelte]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/simple-icons -->
<div class="i-simple-icons:svelte"></div>

Web コンポーネント

<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>

<iconify-icon icon="simple-icons:svelte"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/simple-icons/svelte.svg" alt="Svelte アイコン" width="24" height="24">

他のアイコンセットの Svelte アイコン

Svelte アイコンのよくある質問

Svelte アイコンは商用利用でも無料ですか?

はい。Simple Icons は CC0 1.0 ライセンスで公開されており、個人・商用プロジェクトで利用できます。

React で Svelte アイコンを使うには?

@iconify/react をインストールして <Icon icon="simple-icons:svelte" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。

Svelte アイコンをウェブページに追加するには?

画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/simple-icons/svelte.svg" alt="Svelte アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。

Simple Icons をすべて見る →