Night Cloudy Windy アイコン

wi:night-cloudy-windy

Night Cloudy Windy アイコン(wi:night-cloudy-windy)は、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
タグ: nightcloudy、cloudywindy、nightcloudywindy

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M2.43 21q0 .375.27.6c.17.17.37.26.61.26h9.54c.23 0 .43-.08.59-.25s.24-.37.24-.61s-.08-.44-.24-.61a.76.76 0 0 0-.59-.25H3.31a.87.87 0 0 0-.62.26c-.17.17-.26.37-.26.6m2.64-3.03c0 .23.09.42.27.58q.24.24.6.24h9.55c.24 0 .43-.08.59-.23c.16-.16.23-.35.23-.59q0-.36-.24-.6a.76.76 0 0 0-.59-.25H5.94c-.24 0-.44.08-.61.25a.8.8 0 0 0-.26.6m1.14-2.33c0 .07.07.11.2.11h1.42c.09 0 .16-.05.23-.14q.33-.81 1.05-1.35c.47-.36 1-.56 1.58-.6l.54-.07q.18 0 .18-.18l.07-.51c.11-1.08.57-1.99 1.38-2.72s1.77-1.1 2.87-1.1s2.06.36 2.87 1.09c.81.72 1.28 1.63 1.39 2.73l.08.57c0 .12.06.19.17.19h1.62c.91 0 1.69.32 2.33.95s.96 1.39.96 2.29c0 .89-.32 1.65-.96 2.29s-1.42.96-2.33.96h-6.91c-.11 0-.17.06-.17.17v1.38c0 .12.06.18.17.18h6.91c.91 0 1.74-.22 2.51-.67c.77-.44 1.37-1.05 1.82-1.81s.67-1.59.67-2.49c0-.71-.15-1.37-.44-2.01c.77-1.01 1.15-2.1 1.15-3.29c0-.95-.24-1.83-.71-2.64s-1.11-1.45-1.92-1.92s-1.69-.7-2.64-.7c-1.52 0-2.81.56-3.84 1.67a6.1 6.1 0 0 0-2.72-.62c-.93 0-1.81.2-2.63.59s-1.51.95-2.07 1.66a5.8 5.8 0 0 0-1.13 2.43c-.88.2-1.64.6-2.29 1.2s-1.11 1.33-1.36 2.17zm.62 8.45c0 .23.09.43.26.58q.24.24.6.24h9.56c.24 0 .44-.08.6-.23s.25-.35.25-.59s-.08-.44-.25-.61a.82.82 0 0 0-.6-.25H7.69c-.23 0-.43.09-.6.26s-.26.37-.26.6m13-15.07c.67-.65 1.5-.98 2.47-.98c.99 0 1.83.35 2.52 1.04s1.04 1.53 1.04 2.52c0 .63-.16 1.22-.49 1.77c-.98-.96-2.15-1.43-3.52-1.43h-.32c-.23-1.1-.8-2.07-1.7-2.92"/></svg>

Night Cloudy Windy アイコンの使い方

React

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

<Icon icon="wi:night-cloudy-windy" width="24" />

Vue

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

<template>
  <Icon icon="wi:night-cloudy-windy" width="24" />
</template>

Svelte

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

<Icon icon="wi:night-cloudy-windy" width="24" />

Tailwind CSS

<!-- @iconify/tailwind plugin -->
<span class="icon-[wi--night-cloudy-windy]"></span>

UnoCSS

<!-- @unocss/preset-icons + @iconify-json/wi -->
<div class="i-wi:night-cloudy-windy"></div>

Web コンポーネント

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

<iconify-icon icon="wi:night-cloudy-windy"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/wi/night-cloudy-windy.svg" alt="Night Cloudy Windy アイコン" width="24" height="24">

Weather Icons の関連アイコン

Night Cloudy Windy アイコンのよくある質問

Night Cloudy Windy アイコンは商用利用でも無料ですか?

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

React で Night Cloudy Windy アイコンを使うには?

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

Night Cloudy Windy アイコンをウェブページに追加するには?

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

Weather Icons をすべて見る →