Day Lightning アイコン

wi:day-lightning

Day Lightning アイコン(wi:day-lightning)は、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
タグ: daylightning、owm day 210、owm day 221、owm day 212、owm day 211

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M1.56 16.9c0 1.33.46 2.47 1.39 3.43s2.06 1.47 3.4 1.53c.11 0 .17-.06.17-.17v-1.37c0-.12-.06-.18-.17-.18c-.87-.07-1.6-.41-2.19-1.04c-.59-.62-.89-1.36-.89-2.21c0-.84.28-1.57.85-2.19s1.26-.97 2.1-1.04l.52-.08c.13 0 .2-.06.2-.17L7 12.9c.11-1.08.56-1.99 1.37-2.71c.81-.73 1.76-1.09 2.86-1.09c1.09 0 2.04.36 2.85 1.09c.81.72 1.27 1.63 1.39 2.72l.07.58c0 .11.06.17.19.17h1.6c.91 0 1.68.32 2.32.95q.96.945.96 2.28c0 .85-.3 1.59-.89 2.21s-1.32.97-2.19 1.04c-.13 0-.2.06-.2.18v1.37c0 .11.07.17.2.17c1.33-.04 2.46-.55 3.38-1.51s1.38-2.11 1.38-3.45c0-.68-.16-1.37-.47-2.07c.78-.94 1.18-2.03 1.18-3.27q0-1.065-.42-2.04c-.28-.65-.65-1.2-1.12-1.67s-1.03-.84-1.67-1.12c-.65-.27-1.32-.41-2.03-.41c-1.54 0-2.84.58-3.88 1.73c-.86-.41-1.74-.62-2.65-.62c-1.42 0-2.67.43-3.76 1.3s-1.79 1.99-2.1 3.37c-1.1.26-2.01.83-2.73 1.73s-1.08 1.92-1.08 3.07m7.5 11.27h.3l5.32-7.85c.04-.04.05-.09.02-.14s-.07-.07-.14-.07h-2.18l2.3-4.21c.07-.14.03-.22-.14-.22H11.6c-.08 0-.15.05-.22.14l-2.16 5.72c-.02.14.02.21.14.21h2.17zm.88-23.58c0 .25.08.46.24.62l.66.65c.42.32.82.32 1.21 0c.16-.18.24-.39.24-.64c0-.23-.08-.43-.24-.59l-.64-.65a.9.9 0 0 0-.62-.25c-.23 0-.43.08-.6.25s-.25.38-.25.61m5.34 4.43C15.96 8.34 16.79 8 17.76 8c.98 0 1.81.35 2.49 1.04c.69.69 1.03 1.53 1.03 2.52c0 .61-.17 1.21-.51 1.81c-.98-.94-2.13-1.41-3.46-1.41H17c-.26-1.14-.84-2.12-1.72-2.94m1.62-5.29c0 .25.08.46.24.62s.36.24.61.24c.24 0 .43-.08.59-.24s.23-.37.23-.62V1.69c0-.24-.08-.43-.23-.59a.78.78 0 0 0-.59-.23c-.24 0-.44.08-.6.23s-.25.35-.25.59zm5.52 2.32q0 .345.27.6c.18.17.37.25.55.25c.16 0 .37-.08.62-.25l1.44-1.43c.17-.18.25-.39.25-.63s-.08-.45-.25-.61a.85.85 0 0 0-.6-.24c-.22 0-.41.08-.58.25l-1.43 1.43q-.27.285-.27.63m.81 11.82c0 .23.08.43.24.61l.65.66c.16.16.36.24.58.24c.24 0 .44-.08.6-.25c.17-.17.25-.38.25-.63c0-.23-.08-.42-.25-.57l-.62-.66a.92.92 0 0 0-.62-.23c-.23 0-.43.08-.59.24s-.24.36-.24.59m1.45-6.31c0 .22.09.41.26.57c.17.17.37.25.6.25h2.04c.24 0 .44-.08.61-.24s.25-.35.25-.59s-.09-.44-.26-.61s-.37-.25-.6-.25h-2.04c-.23 0-.43.08-.6.25a.87.87 0 0 0-.26.62"/></svg>

Day Lightning アイコンの使い方

React

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

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

Vue

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

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

Svelte

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

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

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="wi:day-lightning"></iconify-icon>

HTML 画像

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

Weather Icons の関連アイコン

他のアイコンセットの Day Lightning アイコン

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

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

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

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

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

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

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

Weather Icons をすべて見る →