Icon Font
YCloud icons are also available as web fonts. Generic icons and business icons are generated into separate font directories so icon-* and business-icon-* classes are not mixed in the same stylesheet. Illustrations are not generated as fonts; use the illustration component entry or illustration-icons/<category>/*.svg static assets instead.
Not recommended for high traffic production use
Each icon font includes all icons for that asset family, which can significantly increase your app's bundle size and load time. For production environments, we recommend using a bundler with tree-shaking support to include only the icons you actually use. Consider using one of the framework-specific packages.
Generic Icon Font
@import '@ycloud-web/icons-static/font/ycloud.css';@import '~@ycloud-web/icons-static/font/ycloud.css';<link rel="stylesheet" href="https://unpkg.com/@ycloud-web/icons-static@latest/font/ycloud.css" /><link rel="stylesheet" href="/your/path/to/ycloud.css" />Once you have included the stylesheet, you can use the icons in your HTML by applying the appropriate CSS classes. Each icon has a corresponding class name that you can use to display it.
For example, to display the generic "house" icon, you would use the following HTML:
<div class="icon-house"></div>Business Icon Font
Business icons use a separate font and the business-icon- class prefix:
@import '@ycloud-web/icons-static/business-font/ycloud-business.css';@import '~@ycloud-web/icons-static/business-font/ycloud-business.css';<link
rel="stylesheet"
href="https://unpkg.com/@ycloud-web/icons-static@latest/business-font/ycloud-business.css"
/><link rel="stylesheet" href="/your/path/to/ycloud-business.css" /><span class="business-icon-whatsapp-outlined" aria-hidden="true"></span>Example with JavaScript
<!doctype html> <html> <body> <i class="icon-home"></i> <script src="index.js"></script> </body> </html>