Vite Icon アイコン
logos:vite-icon
Vite Icon アイコン(logos:vite-icon)は、SVG Logos セットの無料 SVG アイコンです（作者: Gil Barbara）。 256 × 157 のグリッドで描かれています。 SVG Logos icons は CC0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- SVG Logos
- 作者
- Gil Barbara
- ライセンス
- CC0-1.0
- サイズ
- 256 × 157
- タグ
- viteicon
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="256" height="157" viewBox="0 0 256 157"><path fill="#863bff" d="M134.946 152.88c-2.219 2.823-6.756 1.253-6.756-2.335v-34.45a7.56 7.56 0 0 0-7.563-7.561H82.59c-3.075 0-4.868-3.48-3.075-5.98l25.007-35.012c3.581-5.007 0-11.963-6.158-11.963H52.33c-3.075 0-4.867-3.479-3.075-5.978l32.42-45.392a3.79 3.79 0 0 1 3.076-1.585h96.609c3.077 0 4.869 3.479 3.077 5.978l-25.008 35.012c-3.58 5.006 0 11.965 6.158 11.965h38.038c3.155 0 4.927 3.636 2.975 6.122l-71.647 91.186z"/><g mask="url(#SVGWjqK4PPp)" transform="translate(-646.676 .045)scale(10.4296)"><g filter="url(#SVGmX3zpMRg)"><ellipse cx="1.766" cy="4.714" fill="#ede6ff" rx="1.766" ry="4.714" transform="rotate(89.814 27.404 37.877)scale(1 -1)"/></g><g filter="url(#SVGcJ29kbQq)"><ellipse cx="3.334" cy="9.57" fill="#ede6ff" rx="3.334" ry="9.57" transform="rotate(89.814 25.617 28.483)scale(1 -1)"/></g><g filter="url(#SVGVCXNebsq)"><ellipse cx="1.766" cy="9.774" fill="#7e14ff" rx="1.766" ry="9.774" transform="rotate(89.814 24.881 28.851)scale(1 -1)"/></g><g filter="url(#SVGlqmj1bXe)"><ellipse cx="1.766" cy="9.81" fill="#7e14ff" rx="1.766" ry="9.81" transform="rotate(89.814 22.723 32.475)scale(1 -1)"/></g><g filter="url(#SVGAOYyZbsn)"><ellipse cx="1.766" cy="9.81" fill="#7e14ff" rx="1.766" ry="9.81" transform="rotate(269.814 32.8 -22.71)scale(-1 1)"/></g><g filter="url(#SVG9lzppdfc)"><ellipse cx="4.511" cy="7.078" fill="#ede6ff" rx="4.511" ry="7.078" transform="rotate(93.35 41.053 47.09)scale(-1 1)"/></g><g filter="url(#SVGXy1VtbHF)"><ellipse cx="1.113" cy="6.893" fill="#7e14ff" rx="1.113" ry="6.893" transform="rotate(89.009 42.39 49.274)scale(-1 1)"/></g><g filter="url(#SVGXy1VtbHF)"><ellipse cx="1.113" cy="6.893" fill="#7e14ff" rx="1.113" ry="6.893" transform="rotate(89.009 42.39 49.274)scale(-1 1)"/></g><g filter="url(#SVGCrXwx8yF)"><ellipse cx="66.749" cy="3.123" fill="#7e14ff" rx="1.413" ry="9.332" transform="rotate(39.51 66.749 3.123)"/></g><g filter="url(#SVGaqs06dsX)"><ellipse cx="81.86" cy="-1.706" fill="#7e14ff" rx="1.413" ry="9.332" transform="rotate(37.892 81.86 -1.706)"/></g><g filter="url(#SVGfqIWhbIE)"><ellipse cx="79.902" cy="2.278" fill="#47bfff" rx="1.914" ry="3.099" transform="rotate(37.892 79.902 2.278)"/></g><g filter="url(#SVGWR8qqdsg)"><ellipse cx="66.022" cy="12.536" fill="#7e14ff" rx="1.413" ry="9.332" transform="rotate(37.892 66.022 12.536)"/></g><g filter="url(#SVGWR8qqdsg)"><ellipse cx="66.022" cy="12.536" fill="#7e14ff" rx="1.413" ry="9.332" transform="rotate(37.892 66.022 12.536)"/></g><g filter="url(#SVG28PygE8I)"><ellipse cx="78.055" cy="9.835" fill="#7e14ff" rx="1.413" ry="9.332" transform="rotate(37.892 78.055 9.835)"/></g><g filter="url(#SVGchG4vbgu)"><ellipse cx="78.941" cy="10.634" fill="#47bfff" rx="1.914" ry="4.904" transform="rotate(37.892 78.941 10.634)"/></g></g><path fill="#08060d" d="M23.837.046c-30.757 44.023-30.935 112.261 0 156.443h20.78c-30.928-44.182-30.75-112.42 0-156.443zm208.723 0h-20.779c30.753 44.023 30.935 112.261 0 156.443h20.779c30.927-44.182 30.747-112.42 0-156.443"/><mask id="SVGWjqK4PPp" width="16" height="15" x="66" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path d="M74.91 14.654a.363.363 0 0 1-.648-.224v-3.303c0-.4-.325-.725-.725-.725H69.89c-.295 0-.467-.334-.295-.573l2.397-3.357a.725.725 0 0 0-.59-1.148h-4.414a.362.362 0 0 1-.295-.573L69.802.4a.36.36 0 0 1 .295-.152h9.263c.295 0 .467.334.295.573l-2.398 3.357a.725.725 0 0 0 .59 1.147h3.648c.302 0 .472.35.285.587z"/></mask><defs><filter id="SVGmX3zpMRg" width="19.25" height="13.354" x="60.287" y="5.424" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="2.455"/></filter><filter id="SVGcJ29kbQq" width="28.962" height="16.49" x="49.116" y="-2.168" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="2.455"/></filter><filter id="SVGVCXNebsq" width="25.44" height="9.425" x="50.711" y=".898" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGlqmj1bXe" width="25.512" height="9.425" x="52.184" y="6.668" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGAOYyZbsn" width="25.512" height="9.425" x="52.675" y="7.037" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVG9lzppdfc" width="23.963" height="18.867" x="71.677" y="-5.492" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="2.455"/></filter><filter id="SVGXy1VtbHF" width="19.676" height="8.131" x="74.174" y=".979" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGCrXwx8yF" width="17.967" height="20.405" x="57.765" y="-7.079" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGaqs06dsX" width="17.573" height="20.725" x="73.074" y="-12.068" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGfqIWhbIE" width="10.754" height="11.321" x="74.525" y="-3.383" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGWR8qqdsg" width="17.573" height="20.725" x="57.236" y="2.174" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVG28PygE8I" width="17.573" height="20.725" x="69.268" y="-.527" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter><filter id="SVGchG4vbgu" width="12.634" height="13.985" x="72.624" y="3.642" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_242_20653" stdDeviation="1.473"/></filter></defs></svg>Vite Icon アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="logos:vite-icon" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="logos:vite-icon" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="logos:vite-icon" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[logos--vite-icon]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/logos -->
<div class="i-logos:vite-icon"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="logos:vite-icon"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/logos/vite-icon.svg" alt="Vite Icon アイコン" width="24" height="24">SVG Logos の関連アイコン
Vite Icon アイコン のよくある質問
Vite Icon アイコンは商用利用でも無料ですか?
はい。SVG Logos icons は CC0 ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Vite Icon アイコンを使うには?
@iconify/react をインストールして <Icon icon="logos:vite-icon" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Vite Icon アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/logos/vite-icon.svg" alt="Vite Icon アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。