Vanilla Extract アイコン
material-icon-theme:vanilla-extract
Vanilla Extract アイコン(material-icon-theme:vanilla-extract)は、Material Icon Theme セットの無料 SVG アイコンです（作者: Material Extensions）。 800 × 800 のグリッドで描かれています。 Material Icon Theme icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Material Icon Theme
- 作者
- Material Extensions
- ライセンス
- MIT
- サイズ
- 800 × 800
- タグ
- vanillaextract
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="800" viewBox="0 0 800 800"><path fill="#4dd0e1" d="M663.25 410.25c-103.784-91.407-412.709-100.723-517.846-2.846c-7.23 7.892-26.75 25-23.73 37.634c159.311 140.398 448.145 138.143 554.153 6.481c6.824-20.016-7.894-36.817-12.577-41.269"/><path fill="#795548" d="M404.25 578.5c145.5 0 263.75-47.5 263.75-106s-118-106-263.75-106S140.5 414 140.5 472.5s118 106 263.75 106"/><path fill="#f06292" d="M400.16 49.46c-22.807 0 22.829 13.85-4.16 58.54c-16 22.5-45.25 28.25-93.5 55c-47.899 26.555-63.277 49.662-66.678 79.836c-80.204 13.756-66.269 91.232-61.625 101.361c-6.565 4.276-44.961 37.303-5.494 88.268c72.037 62.824 323.526 98.854 444.33 9.785c48.6-35.833 53.566-105.218-15.877-137.072c11.912-72.915-12.186-126.055-76.185-137.48C498.065 87.425 412.84 50.743 400.16 49.46"/><path fill="#4dd0e1" d="M658.288 440.52c-20.143 38.613-58.076 47.576-95.615 62.865c-33.166 7.694-51.985 12.91-85.827 17.115c-40.597 5.36-87.514 4.63-147.596-1.5c-28.037-3.568-60.068-10.65-98.75-21.25c-66.246-23.954-81.398-41.57-86.096-58.404c-12.75-6.25-27.212-10.904-22.02 11.423c9.481 44.154 16.347 69.231 32.866 130.52c9.515 32.88 17.811 70.063 30.615 101.807c30.273 59.248 171.943 68.905 215 67.75c63.145 1.49 155.976-11.737 201.75-45.25C619.8 686.943 633.988 659.793 638 634.75c17.423-69.635 31.596-124.788 39.27-187.654c-9.18-46.002-13.936-21.428-18.982-6.577"/></svg>Vanilla Extract アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="material-icon-theme:vanilla-extract" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="material-icon-theme:vanilla-extract" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="material-icon-theme:vanilla-extract" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[material-icon-theme--vanilla-extract]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/material-icon-theme -->
<div class="i-material-icon-theme:vanilla-extract"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="material-icon-theme:vanilla-extract"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/material-icon-theme/vanilla-extract.svg" alt="Vanilla Extract アイコン" width="24" height="24">他のアイコンセットの Vanilla Extract アイコン
Vanilla Extract アイコン のよくある質問
Vanilla Extract アイコンは商用利用でも無料ですか?
はい。Material Icon Theme icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Vanilla Extract アイコンを使うには?
@iconify/react をインストールして <Icon icon="material-icon-theme:vanilla-extract" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Vanilla Extract アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/material-icon-theme/vanilla-extract.svg" alt="Vanilla Extract アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。