蛙鸣SVG

334 个图标

快速上手

两种方式引入蛙鸣SVG图标库，选择适合你的项目。

1

Web Component 方式（推荐）

和 ionicons、Material Icons 一样，一行 script 引入，直接用标签。

HTML 
<!-- 1. 引入 JS -->
<script src="https://icon-dn9.pages.dev/icon.js"></script>

<!-- 2. 直接用标签 -->
<svg-icon name="home"></svg-icon>
<svg-icon name="bell" size="32"></svg-icon>
<svg-icon name="heart" class="text-red"></svg-icon>
name 图标名，去掉 i- 前缀，如 i-bell-off → name="bell-off"
size 尺寸（像素），默认 24
class 用 CSS color 控制颜色，自动跟随父元素文字色
2

内联 Sprite 方式（最稳）

无 CORS 依赖，复制粘贴即可用，适合任何项目。

1

在图标库首页点击任意图标 → 自动复制 <use> 代码；点击右上角「复制完整 Sprite」→ 复制全部 334 个图标定义。

2

把 Sprite 代码粘贴到你页面的 <body> 最前面（隐藏不显示）。

3

在需要图标的地方写：

HTML + CSS 
<!-- 1. Sprite 只放一次 -->
<svg style="display:none">
  <symbol id="i-home" viewBox="0 0 24 24" fill="none"
          stroke="currentColor" stroke-width="2"
          stroke-linecap="round" stroke-linejoin="round">
    <path d="M3 9.5 12 2l9 7.5V20a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
  </symbol>
</svg>

<!-- 2. 任意位置引用 -->
<svg width="24" height="24"><use href="#i-home"></use></svg>

<!-- 3. 用 CSS 控制大小和颜色 -->
<style>
  .icon { width:1.25em; height:1.25em; vertical-align:-0.25em; }
  .icon-lg { width:32px; height:32px; color:#4f46e5; }
</style>
3

特性

统一描边风格

24×24 网格、stroke-width:2、圆角线帽，视觉一致

自动跟随文字色

stroke="currentColor"，颜色 = 父元素 color

零依赖

纯 SVG，无 JS 运行时，打包后体积仅 ~90KB

全浏览器支持

Chrome / Edge / Safari / Firefox，兼容 Vue、React、小程序