Site Reference

这个站的里里外外

两份参考资料放在一起:左边是整站的目录地图,每个文件干什么用; 右边是 /asset/icon 里 598 枚矢量图标的索引,点一下就复制引用路径。

01

目录结构

网站根目录下的每一条路径。点击文件夹可展开 / 收起,点文件复制它的绝对路径。

02

图标索引

598 枚 SVG,来自 Ant Design 官方图标库(iconfont 集合 cid=9402,整理者「竹尔」,非原创)。 点任意一枚复制它的引用代码。

598 枚
03

SVG 说明

这些图标的格式、怎么引用、怎么上色,以及本平台的几条硬规则。

它是什么

全部是纯矢量 SVG——放大不糊、体积极小、能用 CSS 直接改颜色。 单色图标靠 fill="currentColor" 跟随文字色,是放进按钮和导航最省事的素材。

共 598 枚 · 均为 viewBox="0 0 1024 1024" 的方形画布

怎么引用

三种常见用法,从简到繁:

  • img 标签 — 最简单,但颜色定死在文件里,无法用 CSS 改色。 <img src="/asset/icon/home.svg" width="20" alt="">
  • 内联 SVG — 直接把文件内容贴进 HTML,好处是能用 currentColor 改色,也能换 stroke。 图标少的时候用它。
  • 背景图 — background-image:url(/asset/icon/search.svg),适合做装饰性或 input 里的图标。

站内引用一律写绝对路径,从网站根算起,别带开头的域名

命名规律

  • -fill 后缀 = 实心版本,不带则是描边 / 线性版本,成对出现。
  • -circle-fill / -square-fill = 品牌图标带圆形或方形底。
  • 下划线(account_book)多见于较老的图标,连字符(arrow-down)是主流写法,搜索时两种都试试。

本平台限制

按站点规范,有两条不能碰:

  • 不要用 base64 把图标或图片塞进代码里——体积翻几倍,还毁缓存。用文件路径引用。
  • 不要加载外部字体 / 字体图标(如 Google Fonts、iconfont 的在线字体),国内常常打不开或很慢。所以这里全部用本地 SVG,不引 CDN 字体。

需要矢量图标时,优先从这里挑,离线可用