Beacon アイコン
thesvg-color:beacon
Beacon アイコン(thesvg-color:beacon)は、theSVG Color セットの無料 SVG アイコンです（作者: thesvg.org）。 93 × 20 のグリッドで描かれています。 theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。 SVG・JSX・Vue・Svelte のコードとしてコピーするか、SVG ファイルをダウンロードできます。
- アイコンセット
- theSVG Color
- 作者
- thesvg.org
- ライセンス
- MIT
- サイズ
- 93 × 20
SVG コード
<svg xmlns="http://www.w3.org/2000/svg" width="93" height="20" viewBox="0 0 93 20"><path fill="#ff7e23" fill-rule="evenodd" d="M6.815 19.719c4.869 0 7.122-2.254 7.122-5.494c0-2.845-1.83-4.79-4.197-5.352c1.662-.647 2.844-2.028 2.844-4.028c0-2.59-1.94-4.845-5.911-4.845H0v19.719zM3.096 8V2.733h3.322c2.028 0 3.097.958 3.097 2.535C9.515 6.873 8.417 8 6.389 8zm7.742 5.747c0-1.944-1.24-3.324-4.196-3.324H3.096v6.563h3.577c2.928 0 4.165-1.24 4.165-3.24Zm18.78-.226H18.043c.452 2.59 2.48 3.888 4.814 3.888c1.943 0 2.983-.507 4.055-1.353l1.717 1.634C27.335 19.157 25.476 20 22.774 20c-3.687 0-7.716-2.507-7.716-7.578c0-5.1 4.14-7.632 7.432-7.632c3.325 0 7.831 2.533 7.127 8.73Zm-11.545-2.255h8.813c-.28-2.59-2.505-3.86-4.39-3.86c-1.86.003-3.945 1.27-4.423 3.86m19.874-6.479c-3.293 0-7.263 2.48-7.263 7.607c0 5.126 3.97 7.606 7.263 7.606c2.535 0 4.281-1.466 4.872-2.677h.168v2.393h3.041V5.068h-3.041v2.394h-.168c-.591-1.211-2.337-2.675-4.872-2.675m.395 2.706c2.279 0 4.73 1.632 4.73 4.9c0 3.27-2.449 4.903-4.73 4.9c-2.28 0-4.701-1.633-4.701-4.9c0-3.265 2.42-4.9 4.7-4.9Zm20.832 1.913l2.366-1.07c-1.323-2.364-3.603-3.546-6.252-3.549c-3.322 0-7.574 2.533-7.574 7.633c0 5.097 4.252 7.578 7.574 7.578c2.676 0 4.927-1.154 6.279-3.521l-2.393-1.07c-.874 1.183-2.056 1.887-3.857 1.887c-2.167 0-4.646-1.634-4.646-4.874c0-3.295 2.48-4.929 4.646-4.929c1.801 0 2.986.733 3.857 1.915M69.871 20c3.35 0 7.602-2.48 7.602-7.578c0-5.1-4.251-7.632-7.602-7.632s-7.603 2.533-7.603 7.632c0 5.098 4.252 7.578 7.603 7.578m.002-2.704c-2.166 0-4.645-1.634-4.645-4.873c0-3.295 2.476-4.93 4.645-4.93c2.17 0 4.646 1.635 4.646 4.93c0 3.24-2.477 4.873-4.646 4.873m22.858 2.423V11.24c0-4.564-2.757-6.45-5.489-6.45c-3.18 0-4.758 2.477-5.04 3.323V5.071h-3.04v14.645h3.04v-8.76c.14-1.237 1.493-3.491 3.998-3.491c1.857 0 3.49 1.156 3.49 3.943v8.31z" clip-rule="evenodd"/></svg>Beacon アイコンの使い方
React
import { Icon } from "@iconify/react";
<Icon icon="thesvg-color:beacon" width="24" />Vue
<script setup>
import { Icon } from "@iconify/vue";
</script>
<template>
<Icon icon="thesvg-color:beacon" width="24" />
</template>Svelte
<script>
import Icon from "@iconify/svelte";
</script>
<Icon icon="thesvg-color:beacon" width="24" />Tailwind CSS
<!-- @iconify/tailwind plugin -->
<span class="icon-[thesvg-color--beacon]"></span>UnoCSS
<!-- @unocss/preset-icons + @iconify-json/thesvg-color -->
<div class="i-thesvg-color:beacon"></div>Web コンポーネント
<script src="https://code.iconify.design/iconify-icon/2.1.0/iconify-icon.min.js"></script>
<iconify-icon icon="thesvg-color:beacon"></iconify-icon>HTML 画像
<img src="https://iconyz.com/api/public/svg/thesvg-color/beacon.svg" alt="Beacon アイコン" width="24" height="24">他のアイコンセットの Beacon アイコン
Beacon アイコン のよくある質問
Beacon アイコンは商用利用でも無料ですか?
はい。theSVG Color icons は MIT ライセンス で公開されており、個人・商用プロジェクトで利用できます。
React で Beacon アイコンを使うには?
@iconify/react をインストールして <Icon icon="thesvg-color:beacon" /> を描画するか、このページの「コードをコピー」で単体の React コンポーネントを取得します。
Beacon アイコンをウェブページに追加するには?
画像タグで SVG ファイルを読み込みます: <img src="https://iconyz.com/api/public/svg/thesvg-color/beacon.svg" alt="Beacon アイコン">。CSS でスタイルを付けたい場合は SVG コードをページに直接貼り付けます。