Tsunami アイコン

wi:tsunami

Tsunami アイコン(wi:tsunami)は、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

SVG をダウンロード

SVG コード

<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30"><path fill="currentColor" d="M5.07 21.24c0-.16.06-.3.17-.42c.12-.12.25-.18.41-.18h.4c-.21-.66-.39-1.35-.53-2.07c-.21-1.1-.32-2.1-.32-2.99c0-1.71.3-3.32.91-4.81c.62-1.46 1.48-2.71 2.59-3.76c1.12-1.06 2.42-1.87 3.9-2.42c1.51-.57 3.14-.86 4.91-.86c1.06 0 2.06.09 3 .28c.94.22 1.85.56 2.73 1.03l1.7.91l-1.88.39q-.87.195-1.2.78q-.24.48.03 1.11l.41.95l-1.02.05c-.43.03-.83.12-1.18.27c-.33.16-.52.32-.58.5c-.11.23.01.56.36 1l.81.96l-1.26.18q-2.325.345-3.81.96c-1.485.615-1.77.94-2.35 1.59c-.56.62-.98 1.42-1.25 2.37c-.27.96-.42 2.15-.45 3.59h5.26v-2.78l-.38.23a.55.55 0 0 1-.45.07a.53.53 0 0 1-.37-.28c-.09-.14-.11-.29-.08-.45s.12-.29.27-.38l3.82-2.38l.02-.02c.01 0 .01 0 .01-.01h.02c.01 0 .02 0 .03-.01c.07-.02.14-.05.23-.07h.06c.01.01.02.02.03.02h.07c0 .01.01.01.02.01h.03l.02.01h.02c.01.01.02.02.02.03h.02c.01 0 .01 0 .01.01c.02 0 .03 0 .03.01c.01 0 .02 0 .03.01l.02.01l3.82 2.35c.14.09.23.22.27.38c.03.17.01.32-.08.46c-.08.14-.2.23-.37.26s-.32.01-.45-.08l-.31-.19v2.77h.96c.16 0 .29.06.4.18s.16.26.16.42c.01.17-.05.31-.16.43s-.25.18-.4.18H5.65a.58.58 0 0 1-.58-.6m1.55-5.66q0 1.065.3 2.73c.15.81.33 1.52.54 2.12h2.69c.05-1.45.2-2.65.45-3.59c.35-1.27.88-2.31 1.6-3.09c.73-.82 1.69-1.47 2.89-1.96c.82-.34 1.86-.63 3.11-.87l-.08-.25q-.15-.69.09-1.23c.22-.51.65-.92 1.28-1.21c.07-.03.13-.06.19-.07c-.86-.2-1.73-.25-2.6-.14c-.99.12-1.92.41-2.78.85c-1.11.58-2.11 1.41-3.01 2.48c-.1.12-.23.18-.38.18a.48.48 0 0 1-.31-.1c-.1-.09-.16-.2-.17-.34s.02-.26.11-.37c1-1.19 2.11-2.1 3.34-2.73c.98-.49 2.03-.81 3.14-.95a7.2 7.2 0 0 1 1.67-.02c.54.06.92.12 1.14.17s.37.09.45.12l.08.03q.075-.465.24-.84c.16-.29.37-.56.64-.8c-.3-.09-.65-.19-1.04-.28c-.8-.18-1.7-.26-2.69-.26c-1.58 0-3.05.26-4.42.77c-1.34.51-2.48 1.22-3.42 2.14c-.98.91-1.73 2-2.23 3.26c-.55 1.32-.82 2.74-.82 4.25m11.43 5.06h3.88v-3.52l-1.98-1.21l-1.9 1.19z"/></svg>

Tsunami アイコンの使い方

React

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

<Icon icon="wi:tsunami" width="24" />

Vue

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

<template>
  <Icon icon="wi:tsunami" width="24" />
</template>

Svelte

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

<Icon icon="wi:tsunami" width="24" />

Tailwind CSS

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

UnoCSS

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

Web コンポーネント

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

<iconify-icon icon="wi:tsunami"></iconify-icon>

HTML 画像

<img src="https://iconyz.com/api/public/svg/wi/tsunami.svg" alt="Tsunami アイコン" width="24" height="24">

他のアイコンセットの Tsunami アイコン

Tsunami アイコンのよくある質問

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

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

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

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

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

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

Weather Icons をすべて見る →