Night Thunderstorm アイコン

wi:night-thunderstorm

Night Thunderstorm アイコン(wi:night-thunderstorm)は、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
タグ: nightthunderstorm

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M4.28 16.89c0 1.11.33 2.11.99 2.98s1.52 1.46 2.56 1.75l-.64 1.68c-.05.14 0 .22.14.22h2.12l-1.04 4.19h.28l3.97-5.62c.04-.04.04-.09.01-.14s-.08-.07-.15-.07h-2.17l2.47-4.61c.07-.14.02-.22-.14-.22H9.74c-.09 0-.16.05-.23.14l-1.07 2.87c-.71-.17-1.3-.56-1.77-1.14s-.7-1.26-.7-2.02q0-1.245.84-2.16c.84-.915 1.26-.96 2.1-1.06l.53-.04q.18 0 .18-.18l.07-.53c.07-.71.3-1.35.69-1.94c.39-.58.9-1.04 1.52-1.37s1.29-.5 2.01-.5c1.08 0 2.03.37 2.84 1.1s1.27 1.63 1.39 2.71l.08.56c0 .12.06.19.17.19h1.62c.89 0 1.65.32 2.3.96s.97 1.39.97 2.27q0 1.29-.9 2.25c-.9.96-1.33.97-2.18 1.02c-.13 0-.2.06-.2.18v1.34c0 .11.07.17.2.17a4.6 4.6 0 0 0 2.4-.72c.73-.45 1.31-1.05 1.72-1.8s.63-1.56.63-2.43q0-1.095-.42-2.01c.78-.93 1.17-2.03 1.17-3.31c0-.71-.14-1.38-.42-2.02s-.65-1.2-1.12-1.67a5.3 5.3 0 0 0-1.67-1.12c-.64-.28-1.32-.42-2.02-.42c-1.54 0-2.83.58-3.86 1.73c-.81-.43-1.71-.65-2.7-.65c-1.41 0-2.66.44-3.75 1.31s-1.79 1.99-2.1 3.35c-1.1.26-2.01.83-2.73 1.73s-1.05 1.9-1.05 3.05m7.93 9.88c0 .16.05.32.15.46s.25.25.45.31l.25.03c.42 0 .68-.2.8-.6l2.43-8.89a.83.83 0 0 0-.07-.64a.82.82 0 0 0-.49-.4a.8.8 0 0 0-.65.06c-.2.11-.34.28-.4.5l-2.45 8.9c-.01.17-.02.26-.02.27m4.14-3.03c0 .4.21.67.62.8l.26.03c.11 0 .23-.02.35-.08c.2-.09.34-.27.42-.55l1.64-5.85a.8.8 0 0 0-.08-.64a.83.83 0 0 0-.51-.4a.814.814 0 0 0-1.04.56l-1.62 5.89c-.02.14-.04.22-.04.24m1.67-14.7c.68-.64 1.5-.96 2.48-.96c.97 0 1.8.34 2.48 1.02c.69.68 1.03 1.51 1.03 2.48c0 .63-.17 1.25-.51 1.85q-1.44-1.44-3.48-1.44h-.32a6.03 6.03 0 0 0-1.68-2.95"/></svg>

Night Thunderstorm アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="wi:night-thunderstorm"></iconify-icon>

HTML 画像

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

Weather Icons の関連アイコン

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

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

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

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

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

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

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

Weather Icons をすべて見る →