Sprinkle アイコン
wi:sprinkle
Sprinkle アイコン(wi:sprinkle)は、Weather Icons セットの無料 SVG アイコンです（作者: Erik Flowers）。 30 × 30 のグリッドで描かれています。 Weather Icons は Open Font License で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- Weather Icons
- 作者
- Erik Flowers
- ライセンス
- OFL-1.1
- サイズ
- 30 × 30
- タグ
- wmo4680 61、owm 300、owm 321、owm 500、wmo4680 41、wmo4680 51、wmo4680 60、wmo4680 57、owm 301、wmo4680 50、wmo4680 43、wmo4680 81
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M4.64 16.91c0-1.15.36-2.17 1.08-3.07a4.82 4.82 0 0 1 2.73-1.73c.31-1.36 1.01-2.48 2.1-3.35s2.35-1.31 3.76-1.31c1.38 0 2.6.43 3.68 1.27A5.88 5.88 0 0 1 20.1 12h.31c.89 0 1.72.22 2.48.65s1.37 1.03 1.81 1.78s.67 1.58.67 2.47q0 2.01-1.38 3.45c-1.38 1.44-2.05 1.47-3.38 1.51c-.13 0-.2-.06-.2-.17v-1.33c0-.12.07-.18.2-.18c.86-.04 1.58-.38 2.18-1.02s.9-1.39.9-2.26s-.32-1.62-.98-2.26q-.975-.96-2.31-.96h-1.6c-.12 0-.19-.06-.19-.17l-.07-.58a4.1 4.1 0 0 0-1.38-2.71c-.82-.73-1.77-1.1-2.85-1.1c-1.09 0-2.05.36-2.86 1.09s-1.27 1.63-1.38 2.71l-.06.54c0 .12-.07.18-.2.18l-.53.03c-.82.04-1.51.37-2.09 1s-.86 1.37-.86 2.22c0 .87.3 1.62.9 2.26s1.33.98 2.18 1.02c.11 0 .17.06.17.18v1.33c0 .11-.06.17-.17.17c-1.34-.06-2.47-.57-3.4-1.53s-1.37-2.08-1.37-3.41m5.93.88c0-.24.12-.57.37-.99c.24-.42.47-.75.68-1.01c.21-.24.34-.38.38-.42l.36.4c.26.28.5.61.72 1.02c.22.4.33.74.33 1c0 .39-.13.72-.4.98s-.6.39-1 .39c-.39 0-.73-.13-1.01-.4c-.29-.26-.43-.59-.43-.97m2.98 3.99c0-.28.08-.59.24-.96s.35-.7.59-1.02c.18-.26.4-.54.67-.84c.26-.3.46-.52.6-.65c.07-.06.15-.14.24-.23l.24.23c.38.33.8.82 1.27 1.46c.24.33.43.68.59 1.04s.23.68.23.97c0 .64-.23 1.19-.68 1.65s-1.01.68-1.66.68c-.64 0-1.19-.23-1.65-.67c-.46-.46-.68-1.01-.68-1.66m1.47-6.66c0-.42.32-.95.97-1.6l.24.25c.18.21.33.45.48.71c.14.26.22.47.22.64c0 .26-.09.48-.28.66c-.18.18-.4.28-.66.28c-.27 0-.5-.09-.69-.28a.87.87 0 0 1-.28-.66"/></svg>Sprinkle アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="wi:sprinkle" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="wi:sprinkle" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="wi:sprinkle" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[wi--sprinkle]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/wi -->
<div class="i-wi:sprinkle"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="wi:sprinkle"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/wi/sprinkle.svg" alt="Sprinkle アイコン" width="24" height="24">Sprinkle アイコン のよくある質問
Sprinkle アイコンは商用利用でも無料ですか?
はい。Weather Icons は Open Font License で公開されており、個人・商用プロジェクトで利用できます。
React で Sprinkle アイコンを使うには?
@iconify/react をインストールして <Icon icon="wi:sprinkle" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Sprinkle アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/wi/sprinkle.svg" alt="Sprinkle アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。