Day Light Wind アイコン

wi:day-light-wind

Day Light Wind アイコン(wi:day-light-wind)は、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
タグ: daylight、lightwind、daylightwind

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M2.32 14.85c0 .24.09.44.26.6c.16.17.36.25.6.25h9.42c.23 0 .43-.08.59-.25q.24-.255.24-.6a.84.84 0 0 0-.23-.59a.8.8 0 0 0-.59-.24H3.18c-.24 0-.44.08-.61.24s-.25.36-.25.59M2.65 21c0 .24.08.44.25.6c.16.17.36.25.6.25h9.43c.24 0 .44-.08.61-.25s.25-.37.25-.6s-.08-.43-.25-.59s-.37-.24-.61-.24H3.51q-.36 0-.6.24c-.17.16-.26.36-.26.59m1.37-3.1c0 .24.08.43.25.59s.38.23.63.23h9.4c.24 0 .43-.08.59-.23c.16-.16.23-.35.23-.59c0-.25-.08-.45-.23-.61a.8.8 0 0 0-.59-.24H4.9q-.375 0-.63.24c-.16.16-.25.36-.25.61m2.43-6.35c0-.24.09-.44.26-.62c.17-.16.38-.24.6-.24h2.03c.23 0 .42.08.58.25s.23.37.23.61s-.08.44-.23.6c-.16.17-.35.25-.58.25H7.31c-.24 0-.44-.08-.61-.25a.82.82 0 0 1-.25-.6m2.86-6.92c0-.22.08-.43.24-.61q.285-.24.63-.24c.22 0 .42.08.59.24l1.42 1.47c.16.15.24.35.24.59q0 .36-.24.6t-.6.24c-.24 0-.44-.08-.59-.24L9.55 5.25a.9.9 0 0 1-.24-.62m2.55 6.8v-.07c.02-.91.27-1.75.74-2.53c.47-.77 1.11-1.38 1.9-1.83s1.65-.67 2.57-.67c.7 0 1.37.14 2.02.42c.64.28 1.2.65 1.66 1.12c.47.47.84 1.02 1.11 1.66s.41 1.32.41 2.02c0 .94-.23 1.8-.69 2.6s-1.09 1.43-1.88 1.89a5.1 5.1 0 0 1-2.6.71h-.2c-.07 0-.13-.02-.18-.07a.25.25 0 0 1-.08-.18v-1.22c0-.13.07-.2.22-.2h.24c.96-.01 1.79-.35 2.47-1.05c.68-.69 1.03-1.52 1.03-2.49c0-.96-.35-1.78-1.04-2.47c-.69-.68-1.52-1.02-2.5-1.02c-.94 0-1.76.32-2.44.98q-1.02.975-1.08 2.37c0 .06-.02.11-.07.17s-.13.09-.25.09h-1.14c-.15.01-.22-.07-.22-.23m4.37 9.88v-1.99q0-.36.24-.6c.24-.24.36-.24.6-.24s.45.08.61.24s.24.36.24.6v1.99c0 .24-.08.45-.25.62s-.37.25-.6.25c-.24 0-.44-.08-.6-.25s-.24-.37-.24-.62m0-17.48V1.78c0-.24.08-.44.25-.6s.36-.25.6-.25c.23 0 .43.08.6.25s.25.37.25.6v2.04c0 .23-.08.42-.25.58c-.17.15-.37.23-.6.23c-.24 0-.44-.08-.6-.23a.72.72 0 0 1-.25-.57m5.51 13.18c0-.23.07-.42.23-.56a.74.74 0 0 1 .57-.23c.24 0 .44.08.6.23l1.45 1.42c.16.17.24.38.24.61s-.08.43-.24.59q-.6.465-1.2 0l-1.42-1.43a.9.9 0 0 1-.23-.63m0-10.93c0-.25.07-.45.23-.59l1.42-1.47c.18-.16.37-.24.59-.24c.24 0 .44.08.6.25c.17.17.25.37.25.6c0 .25-.08.46-.24.62l-1.45 1.43q-.27.24-.6.24c-.23 0-.41-.08-.57-.24s-.23-.36-.23-.6M24 11.55c0-.23.08-.44.25-.62c.16-.16.35-.24.56-.24h2.03c.23 0 .43.09.61.26c.17.17.26.37.26.6s-.09.43-.26.6c-.18.17-.38.25-.61.25h-2.03c-.23 0-.42-.08-.58-.25a.85.85 0 0 1-.23-.6"/></svg>

Day Light Wind アイコンの使い方

React

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

<Icon icon="wi:day-light-wind" width="24" />

Vue

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

<template>
  <Icon icon="wi:day-light-wind" width="24" />
</template>

Svelte

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

<Icon icon="wi:day-light-wind" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[wi--day-light-wind]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/wi -->
<div class="i-wi:day-light-wind"></div>

Web コンポーネント

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

<iconify-icon icon="wi:day-light-wind"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/wi/day-light-wind.svg" alt="Day Light Wind アイコン" width="24" height="24">

Weather Icons の関連アイコン

Day Light Wind アイコンのよくある質問

Day Light Wind アイコンは商用利用でも無料ですか?

はい。Weather Icons は Open Font License で公開されており、個人・商用プロジェクトで利用できます。

React で Day Light Wind アイコンを使うには?

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

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

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

Weather Icons をすべて見る →