Icon Font
YCloud Icons 也提供 Web Font 版本。字体会把所有图标作为 glyph 提供,便于通过 CSS class 在项目中使用。对于偏好 Icon Font 的项目,这是一种方便的选择。
不建议在高流量生产环境中使用
Icon Font 包含全部图标,会显著增加应用包体积和加载时间。生产环境建议使用支持 tree-shaking 的构建工具,只包含实际使用的图标。也可以考虑使用某个框架对应的 package。
使用 CSS 样式表
css
@import '@ycloud-web/icons-static/font/ycloud.css';css
@import '~@ycloud-web/icons-static/font/ycloud.css';html
<link
rel="stylesheet"
href="https://unpkg.com/@ycloud-web/icons-static@latest/font/ycloud.css"
/>html
<link
rel="stylesheet"
href="/your/path/to/ycloud.css"
/>使用 Icon Font
引入样式表后,就可以在 HTML 中通过对应的 CSS class 使用图标。每个图标都有对应的 class 名称用于显示。
例如,要显示 “home” 图标,可以使用下面的 HTML:
html
<div class="icon-house"></div>JavaScript 示例
<!doctype html> <html> <head> <title>YCloud Icons Icon Font</title> </head> <body> <main id="app"></main> <script type="module" src="/index.js"><\/script> </body> </html>