Appwrite アイコン
thesvg-color:appwrite
Appwrite アイコン(thesvg-color:appwrite)は、theSVG Color セットの無料 SVG アイコンです(作者: thesvg.org)。 90 × 91 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 90 × 91
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="90" height="91" viewBox="0 0 90 91"><g fill="none"><g clip-path="url(#SVG4PJc7dNx)"><path fill="#19191d" d="M90 .839H0v90h90z"/><g opacity=".9"><g filter="url(#SVGZ7XcQb7T)"><path fill="#fd366e" fill-opacity=".8" d="M153.6 91.037L5.806-31.793l99.144-29.674z"/></g><g filter="url(#SVG3ERjAdvi)" opacity=".55"><path fill="#fe9567" fill-opacity=".8" d="M149.601 66.145L26.704-35.994l82.443-24.675z"/></g><g filter="url(#SVG2d6IfP0U)"><path fill="#fd366e" fill-opacity=".8" d="m99.172-30.774l29.725 93.182l-78.146-1.212l-12.157-73.84z"/></g><g filter="url(#SVGLrhATcBo)" opacity=".65"><path fill="#fe9567" fill-opacity=".8" d="m122.067 25.612l-65.743-54.64l44.103-13.2z"/></g><g filter="url(#SVGMWSAgV1a)"><ellipse cx="51.664" cy="4.998" fill="#ededf0" fill-opacity=".4" rx="51.664" ry="4.998" transform="rotate(44.222 52.735 69.976)scale(1 -1)"/></g><g filter="url(#SVGp9YolYXJ)"><ellipse cx="40.558" cy="4.13" fill="#ededf0" fill-opacity=".4" rx="40.558" ry="4.13" transform="rotate(44.222 36.043 48.606)scale(1 -1)"/></g></g><g filter="url(#SVGMHwwIeGw)"><path fill="url(#SVGZvvtkcmU)" d="M71.92 57.313v12.074H41.658c-8.817 0-16.515-4.856-20.634-12.075a24.3 24.3 0 0 1-3.132-10.442v-3.264a24 24 0 0 1 .842-4.954c2.827-10.136 12.02-17.563 22.924-17.563s20.095 7.427 22.922 17.563H51.64c-2.124-3.304-5.8-5.489-9.982-5.489s-7.859 2.185-9.983 5.489a12 12 0 0 0-1.479 3.293a12.2 12.2 0 0 0-.448 3.293c0 3.461 1.435 6.58 3.737 8.782a11.78 11.78 0 0 0 8.173 3.292H71.92Z"/><path fill="#fd366e" d="M71.92 41.944V54.02H49.83a12.1 12.1 0 0 0 3.738-8.782a12.3 12.3 0 0 0-.448-3.293z"/></g></g><defs><filter id="SVGZ7XcQb7T" width="310.336" height="315.046" x="-75.465" y="-142.738" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="40.636"/></filter><filter id="SVG3ERjAdvi" width="242.601" height="246.518" x="-33.148" y="-120.521" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="29.926"/></filter><filter id="SVG2d6IfP0U" width="315.887" height="318.766" x="-74.198" y="-143.566" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="56.396"/></filter><filter id="SVGLrhATcBo" width="163.269" height="165.364" x="7.561" y="-90.99" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="24.381"/></filter><filter id="SVGMWSAgV1a" width="131.272" height="129.315" x="38.621" y="-49.158" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="14.222"/></filter><filter id="SVGp9YolYXJ" width="115.311" height="113.776" x="18.403" y="-42.926" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feBlend in="SourceGraphic" in2="BackgroundImageFix" result="shape"/><feGaussianBlur result="effect1_foregroundBlur_878_1918" stdDeviation="14.222"/></filter><filter id="SVGMHwwIeGw" width="65.309" height="59.578" x="12.252" y="15.449" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="2.82"/><feComposite in2="hardAlpha" operator="out"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"/><feBlend in2="BackgroundImageFix" result="effect1_dropShadow_878_1918"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_878_1918" result="shape"/></filter><linearGradient id="SVGZvvtkcmU" x1="30.605" x2="102.512" y1="21.004" y2="98.87" gradientUnits="userSpaceOnUse"><stop offset=".36" stop-color="#fd366e"/><stop offset="1" stop-color="#fe9567"/></linearGradient><clipPath id="SVG4PJc7dNx"><path fill="#fff" d="M90 .839H0v90h90z"/></clipPath></defs></g></svg>Appwrite アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:appwrite" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:appwrite" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:appwrite" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--appwrite]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:appwrite"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:appwrite"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/appwrite.svg" alt="Appwrite アイコン" width="24" height="24">他のアイコンセットの Appwrite アイコン
Appwrite アイコン のよくある質問
Appwrite アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Appwrite アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:appwrite" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Appwrite アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/appwrite.svg" alt="Appwrite アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。