Svelte アイコン

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

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

skill-icons:svelte

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

アイコンセット: Skill Icons
作者: tandpfun
ライセンス: MIT
サイズ: 256 × 256

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="256" height="256" viewBox="0 0 256 256"><g fill="none"><rect width="256" height="256" fill="#ff3e00" rx="60"/><g clip-path="url(#SVGsyD8NePA)"><path fill="#fff" d="M193.034 61.797c-16.627-23.95-49.729-30.966-73.525-15.865L77.559 72.78c-11.44 7.17-19.372 18.915-21.66 32.186c-1.984 11.136-.306 22.576 5.033 32.492c-3.66 5.491-6.102 11.593-7.17 18c-2.44 13.576.764 27.61 8.696 38.745c16.78 23.95 49.728 30.966 73.525 15.865l41.949-26.695c11.441-7.17 19.373-18.915 21.661-32.187c1.983-11.135.305-22.576-5.034-32.491c3.661-5.492 6.102-11.593 7.17-18c2.593-13.729-.61-27.763-8.695-38.898"/><path fill="#ff3e00" d="M115.39 196.491a33.25 33.25 0 0 1-35.695-13.271c-4.881-6.712-6.712-15.101-5.34-23.339c.306-1.373.611-2.593.916-3.966l.763-2.44L78.169 155a55.6 55.6 0 0 0 16.475 8.237l1.525.458l-.152 1.525c-.153 2.136.458 4.424 1.678 6.255c2.441 3.508 6.712 5.186 10.83 4.118c.916-.305 1.831-.61 2.594-1.068l41.796-26.695c2.136-1.372 3.509-3.355 3.966-5.796s-.152-5.034-1.525-7.017c-2.441-3.509-6.712-5.034-10.831-3.966c-.915.305-1.83.61-2.593 1.068l-16.017 10.22c-2.593 1.678-5.491 2.898-8.542 3.661a33.25 33.25 0 0 1-35.695-13.271c-4.729-6.712-6.712-15.102-5.186-23.339c1.372-7.932 6.254-15.102 13.118-19.373l41.949-26.695c2.593-1.678 5.492-2.898 8.543-3.814a33.25 33.25 0 0 1 35.695 13.272c4.881 6.712 6.711 15.101 5.339 23.339c-.306 1.373-.611 2.593-1.068 3.966l-.763 2.44l-2.136-1.525a55.6 55.6 0 0 0-16.474-8.237l-1.526-.458l.153-1.525c.153-2.136-.458-4.424-1.678-6.255c-2.441-3.508-6.712-5.034-10.83-3.966c-.916.305-1.831.61-2.594 1.068l-41.796 26.695c-2.136 1.373-3.509 3.356-3.966 5.797s.152 5.034 1.525 7.017c2.441 3.508 6.712 5.033 10.831 3.966c.915-.305 1.83-.611 2.593-1.068l16.017-10.22c2.593-1.678 5.491-2.899 8.542-3.814a33.25 33.25 0 0 1 35.695 13.271c4.881 6.712 6.712 15.102 5.339 23.339c-1.373 7.932-6.254 15.102-13.119 19.373l-41.949 26.695c-2.593 1.678-5.491 2.898-8.542 3.813"/></g><defs><clipPath id="SVGsyD8NePA"><path fill="#fff" d="M53 38h149.644v180H53z"/></clipPath></defs></g></svg>

Svelte アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

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

HTML 画像

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

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

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

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

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

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

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

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

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

Skill Icons をすべて見る →