[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3785":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":18,"stars30d":19,"stars90d":16,"forks30d":16,"starsTrendScore":20,"compositeScore":21,"rankGlobal":10,"rankLanguage":10,"license":22,"archived":23,"fork":23,"defaultBranch":24,"hasWiki":23,"hasPages":23,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":32,"readmeContent":33,"aiSummary":34,"trendingCount":16,"starSnapshotCount":16,"syncStatus":17,"lastSyncTime":35,"discoverSource":36},3785,"ionicons","ionic-team\u002Fionicons","ionic-team","Premium hand-crafted icons built by Ionic, for Ionic apps and web apps everywhere 🌎","http:\u002F\u002Fionicons.com",null,"TypeScript",18079,2055,367,68,0,2,12,38,10,83.74,"MIT License",false,"main",[26,27,28,29,5,30,31],"icon-pack","icons","iconset","ionic","stenciljs","webcomponents","2026-06-12 04:00:19","# Ionicons\n\n[Ionicons](http:\u002F\u002Fionicons.com\u002F) is a completely open-source icon set with 1,300 icons crafted for web, iOS, Android, and desktop apps. Ionicons was built for [Ionic Framework](https:\u002F\u002Fionicframework.com\u002F), so icons have both Material Design and iOS versions.\n\nNote: All brand icons are trademarks of their respective owners. The use of these trademarks does not indicate endorsement of the trademark holder by Ionic, nor vice versa.\n\nWe intend for this icon pack to be used with [Ionic](http:\u002F\u002Fionicframework.com\u002F), but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. They are free to use and licensed under [MIT](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT).\n\n\n## Contributing\n\nThanks for your interest in contributing! Read up on our guidelines for\n[contributing](https:\u002F\u002Fgithub.com\u002Fionic-team\u002Fionicons\u002Fblob\u002Fmain\u002FCONTRIBUTING.md)\nand then look through our issues with a [help wanted](https:\u002F\u002Fgithub.com\u002Fionic-team\u002Fionicons\u002Fissues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22)\nlabel.\n\n\n## Using the Web Component\n\nThe Ionicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need.\n\nAlso note that only visible icons are loaded, and icons that are \"below the fold\" and hidden from the user's view do not make fetch requests for the svg resource.\n\n### Installation\n\nIf you're using [Ionic Framework](https:\u002F\u002Fionicframework.com\u002F), Ionicons is packaged by default, so no installation is necessary. Want to use Ionicons without Ionic Framework? Place the following `\u003Cscript>` near the end of your page, right before the closing `\u003C\u002Fbody>` tag, to enable them.\n\n```html\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fesm.sh\u002Fionicons@latest\u002Floader\">\u003C\u002Fscript>\n\u003Cscript nomodule src=\"https:\u002F\u002Fesm.sh\u002Fionicons@latest\u002Floader\">\u003C\u002Fscript>\n```\n\nyou can replace `latest` to pick any version of Ionicon, e.g.:\n\n```html\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fesm.sh\u002Fionicons@8.0.0\u002Floader\">\u003C\u002Fscript>\n\u003Cscript nomodule src=\"https:\u002F\u002Fesm.sh\u002Fionicons@8.0.0\u002Floader\">\u003C\u002Fscript>\n```\n\n### Basic usage\n\nTo use a built-in icon from the Ionicons package, populate the `name` attribute on the ion-icon component:\n\n```html\n\u003Cion-icon name=\"heart\">\u003C\u002Fion-icon>\n```\n\n### Custom icons\n\nTo use a custom SVG, provide its url in the `src` attribute to request the external SVG file. The `src` attribute works the same as `\u003Cimg src=\"...\">` in that the url must be accessible from the webpage that's making a request for the image. Additionally, the external file can only be a valid svg and does not allow scripts or events within the svg element.\n\n```html\n\u003Cion-icon src=\"\u002Fpath\u002Fto\u002Fexternal\u002Ffile.svg\">\u003C\u002Fion-icon>\n```\n\n#### Custom Asset Path\n\nIf you have a different set of icons you would like to load or if the Ionicon icons are hosted on a different page or path, you can set the asset url from which Ionicons pulls the icons via:\n\n```ts\nimport { setAssetPath, addIcons } from 'ionicons';\nimport { add, logoIonic, save } from 'ionicons\u002Ficons';\n\n\u002F\u002F set root path for loading icons to \"\u003Croot>\u002Fpublic\u002Fsvg\"\nsetAssetPath(`${window.location.origin}\u002Fpublic\u002Fsvg\u002F`);\n\n\u002F\u002F only load specific icons\naddIcons({ add, logoIonic, save });\n```\n\nThis allows the use of named icons like this:\n\n```html\n\u003C!-- now pulls the svg from \"\u003Croot>\u002Fpublic\u002Fsvg\u002Fheart.svg\" -->\n\u003Cion-icon name=\"heart\">\u003C\u002Fion-icon>\n```\n\n## Variants\nEach app icon in Ionicons has a `filled`, `outline` and `sharp` variant. These different variants are provided to make your app feel native to a variety of platforms. The filled variant uses the default name without a suffix. Note: Logo icons do not have outline or sharp variants.\n\n```html\n\u003Cion-icon name=\"heart\">\u003C\u002Fion-icon> \u003C!--filled-->\n\u003Cion-icon name=\"heart-outline\">\u003C\u002Fion-icon> \u003C!--outline-->\n\u003Cion-icon name=\"heart-sharp\">\u003C\u002Fion-icon> \u003C!--sharp-->\n```\n\n### Platform specificity\nWhen using icons in Ionic Framework you can specify different icons per platform. Use the `md` and `ios` attributes and provide the platform-specific icon\u002Fvariant name.\n\n```html\n\u003Cion-icon ios=\"heart-outline\" md=\"heart-sharp\">\u003C\u002Fion-icon>\n```\n\n## Size\n\nTo specify the icon size, you can use the size attribute for our pre-defined font sizes.\n\n```html\n\u003Cion-icon size=\"small\">\u003C\u002Fion-icon>\n\u003Cion-icon size=\"large\">\u003C\u002Fion-icon>\n```\n\nOr you can set a specific size by applying the `font-size` CSS property on the `ion-icon` component. It's recommended to use pixel sizes that are a multiple of 8 (8, 16, 32, 64, etc.)\n\n```css\nion-icon {\n  font-size: 64px;\n}\n```\n\n## Color\n\nSpecify the icon color by applying the `color` CSS property on the `ion-icon` component.\n\n```css\nion-icon {\n  color: blue;\n}\n```\n\n## Stroke width\nWhen using an `outline` icon variant it is possible to adjust the stroke width, for improved visual balance relative to the icon's size or relative to the width of adjacent text. You can set a specific size by applying the `--ionicon-stroke-width` CSS custom property to the `ion-icon` component. The default value is 32px.\n\n```html\n\u003Cion-icon name=\"heart-outline\">\u003C\u002Fion-icon>\n```\n\n```css\nion-icon {\n  --ionicon-stroke-width: 16px;\n}\n```\n\n## Migrating from v4\n\nSee the [5.0 release notes](https:\u002F\u002Fgithub.com\u002Fionic-team\u002Fionicons\u002Freleases\u002Ftag\u002F5.0.0) for a list of icon deletions\u002Frenames.\n\n## License\n\nIonicons is licensed under the [MIT license](http:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT).\n\n\n## Related\n\n* [Ionicons Homepage](http:\u002F\u002Fionicons.com\u002F)\n* [Ionic Framework](https:\u002F\u002Fionicframework.com\u002F)\n* [Ionic Discord](https:\u002F\u002Fionic.link\u002Fdiscord)\n* [Ionic Forum](https:\u002F\u002Fforum.ionicframework.com\u002F)\n* [Stencil](https:\u002F\u002Fstenciljs.com\u002F)\n* [Capacitor](https:\u002F\u002Fcapacitorjs.com\u002F)\n","Ionicons 是一个开源图标集，包含1300多个专为网页、iOS、Android及桌面应用程序设计的图标。该项目采用TypeScript编写，支持Material Design和iOS风格的图标，具有高度可定制性，并且可以通过Web组件形式轻松集成到项目中，仅加载实际需要的SVG图标以提高性能。Ionicons特别适合与Ionic框架一起使用，但其灵活性也使其能够应用于任何需要高质量图标的前端项目中。MIT许可证下免费提供，既可用于个人也可用于商业用途。","2026-06-11 02:56:16","top_language"]