{"id":13459416,"url":"https://github.com/uiwjs/icons","last_synced_at":"2025-10-22T21:43:51.501Z","repository":{"id":26529857,"uuid":"109255139","full_name":"uiwjs/icons","owner":"uiwjs","description":"The premium icon font for @uiwjs Component Library. https://uiwjs.github.io/icons","archived":false,"fork":false,"pushed_at":"2025-02-13T17:37:15.000Z","size":15760,"stargazers_count":141,"open_issues_count":2,"forks_count":19,"subscribers_count":10,"default_branch":"master","last_synced_at":"2025-05-05T05:04:45.507Z","etag":null,"topics":["css","font","fonts","icon","icon-classname","icon-font","icon-pack","icons","svg","svg-icons","svgtofont","ttf2eot","ttf2svg","ttf2woff","uiw","uiw-iconfont","webfont"],"latest_commit_sha":null,"homepage":"https://uiwjs.github.io/icons","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/uiwjs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"ko_fi":"jaywcjlove","buy_me_a_coffee":"jaywcjlove","custom":["https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"]}},"created_at":"2017-11-02T11:19:16.000Z","updated_at":"2025-05-01T20:16:45.000Z","dependencies_parsed_at":"2023-12-22T08:28:29.938Z","dependency_job_id":"ccb0678c-3314-46e4-8580-22d5183fd448","html_url":"https://github.com/uiwjs/icons","commit_stats":{"total_commits":243,"total_committers":6,"mean_commits":40.5,"dds":"0.11934156378600824","last_synced_commit":"2974ce195988838e9cd5b22e4074b9f9f4bf75f3"},"previous_names":[],"tags_count":56,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Ficons","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Ficons/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Ficons/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/uiwjs%2Ficons/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/uiwjs","download_url":"https://codeload.github.com/uiwjs/icons/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254459087,"owners_count":22074605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","font","fonts","icon","icon-classname","icon-font","icon-pack","icons","svg","svg-icons","svgtofont","ttf2eot","ttf2svg","ttf2woff","uiw","uiw-iconfont","webfont"],"created_at":"2024-07-31T09:01:21.211Z","updated_at":"2025-10-22T21:43:51.446Z","avatar_url":"https://github.com/uiwjs.png","language":"HTML","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://uiwjs.github.io/icons\"\u003e\n    \u003cimg width=\"150\" src=\"https://raw.githubusercontent.com/uiwjs/icons/master/assets/logo.svg?sanitize=true\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n@uiw/icons\n===\n\n[![NPM Downloads](https://img.shields.io/npm/dm/@uiw/icons.svg?style=flat)](https://www.npmjs.com/package/@uiw/icons)\n[![jsDelivr CDN](https://data.jsdelivr.com/v1/package/npm/@uiw/icons/badge?style=rounded)](https://www.jsdelivr.com/package/npm/@uiw/icons)\n[![releases version](https://img.shields.io/github/release/uiwjs/icons.svg)](https://github.com/uiwjs/icons/releases)\n[![LICENSE](https://img.shields.io/dub/l/vibe-d.svg)](https://github.com/uiwjs/icons)\n[![NPM Version](https://img.shields.io/npm/v/@uiw/icons.svg)](https://www.npmjs.com/package/@uiw/icons)\n\nThe premium icon font for [uiwjs](https://github.com/uiwjs) Component Library. Designed [`@uiw/icons`](https://uiwjs.github.io/icons/design/) by [@liwen0526](https://github.com/liwen0526). \n\nVisit **[https://uiwjs.github.io/icons/](https://uiwjs.github.io/icons/)** and check out the search feature, which has keywords identifying common icon names and styles. For example, if you search for \"arrow\" we call up every icon that could possibly be used as an arrow. We've also included each icon's class name for easy copy / pasting when you're developing!\n\nThey are free to use and licensed under [MIT](https://opensource.org/licenses/MIT). We intend for this icon pack to be used with [uiw](https://uiwjs.github.io), but it’s by no means limited to it. Use them wherever you see fit, personal or commercial. \n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://uiwjs.github.io/icons\"\u003e\n    \u003cimg src=\"https://github.com/uiwjs/icons/raw/master/assets/uiw-font.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n```bash\nnpm install @uiw/icons --save\n```\n\n## HTML Example\n\nYou can use [https://uiwjs.github.io/icons/](https://uiwjs.github.io/icons/) to easily find the icon you want to use. Once you've copied the desired icon's CSS classname, simply add the icon and icon's classname, such as `apple` to an HTML element.\n\nYou need link CSS\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"node_modules/@uiw/icons/w-icon.css\"\u003e\n```\n\n**Used in Less:**\n\n```css\n@import \"~@uiw/icons/fonts/w-icon.css\";\n```\n\n**Used in JS:**\n\n```js\nimport '@uiw/icons/fonts/w-icon.css';\n// or\nimport '@uiw/icons/fonts/w-icon.less';\n```\n\nnote: It has a `w-icon-` prefix. \n\n```html\n\u003ci class=\"w-icon-apple\"\u003e\u003c/i\u003e\n```\n\nOr use the `Unicode`, You can use [Unicode website](https://uiwjs.github.io/icons/unicode.html) to easily find the `Unicode` icon you want to use. \n\n```html\n\u003cstyle\u003e\n.iconfont{\n  font-family: \"w-icon\" !important;\n  font-size: 16px;\n  font-style: normal;\n  -webkit-font-smoothing: antialiased;\n  -webkit-text-stroke-width: 0.2px;\n  -moz-osx-font-smoothing: grayscale;\n}\n\u003c/style\u003e\n\u003cspan class=\"iconfont\"\u003e\u0026#59907;\u003c/span\u003e\n```\n\nOr manually download and link `**@uiw/icons**` in your HTML, It can also be downloaded via [UNPKG](https://unpkg.com/@uiw/icons/):\n\n```html\n\u003clink rel=\"stylesheet\" type=\"text/css\" href=\"https://unpkg.com/@uiw/icons/fonts/w-icon.css\"\u003e\n\u003cspan class=\"w-icon-adobe\"\u003e\u003c/span\u003e\n```\n\n**In Webpack**\n\n```js\n{\n  test: /w-icon\\.(eot|ttf|svg)$/,\n  use: [\n    {\n      loader: require.resolve('url-loader'),\n      options: { limit: 8192 }\n    },\n    {\n      loader: require.resolve('file-loader'),\n      options: {\n        name: 'static/fonts/[name].[hash:8].[ext]',\n      }\n    }\n  ]\n},\n```\n\n## Used in React\n\nIcons are used as components. `v2.6.2+` support.\n\n```jsx\nimport { Adobe, Alipay } from '@uiw/icons';\nimport { Alipay } from '@uiw/icons/Alipay';\n\n\u003cAdobe style={{ fill: 'red' }} /\u003e\n\u003cAlipay height=\"36\" /\u003e\n```\n\nTo use SVG images as React components directly, webpack loader support is required.\n\nInstall dependencies:\n\n```bash\nyarn add @svgr/webpack file-loader\n```\n\nConfigure webpack loader:\n\n```js\n// webpack.config.js\n{\n  test: /\\.svg$/,\n  use: [\n    {\n      loader: require.resolve('@svgr/webpack'),\n      options: {\n        prettier: false,\n        svgo: false,\n        svgoConfig: {\n          plugins: [{ removeViewBox: false }],\n        },\n        titleProp: true,\n        ref: true,\n      },\n    },\n    {\n      loader: require.resolve('file-loader'),\n      options: {\n        name: 'static/media/[name].[hash].[ext]',\n      },\n    },\n  ],\n  issuer: {\n    and: [/\\.(ts|tsx|js|jsx|md|mdx)$/],\n  },\n},\n```\n\nYou can then import the SVG as a React component like this:\n\n```javascript\nimport { ReactComponent as ComLogo } from '@uiw/icons/icon/alipay.svg';\n\n\u003cComLogo /\u003e\n```\n\n**Custom Icon Component**\n\nCreate an `Icon` component.\n\n```jsx\nimport React from 'react';\nimport svgPaths from '@uiw/icons/fonts/w-icon.json';\n\nconst renderSvgPaths = (type) =\u003e {\n  const pathStrings = svgPaths[type];\n  if (pathStrings == null) {\n    return null\n  }\n  return pathStrings.map((d, i) =\u003e \u003cpath key={i} d={d} fillRule=\"evenodd\" /\u003e)\n}\n\nexport default class Icon extends React.PureComponent {\n  render() {\n    const { type, color } = this.props;\n    if (type == null || typeof type === \"boolean\") {\n      return null;\n    }\n    return (\n      \u003csvg fill={color} viewBox={`0 0 24 24`}\u003e{this.renderSvgPaths(type)}\u003c/svg\u003e\n    );\n  }\n}\n```\n\nUse the `Icon` component:\n\n```jsx\nconst demo = () =\u003e {\n  return (\n    \u003cIcon type=\"heart-on\" /\u003e\n  )\n}\n```\n\n## Development\n\nRun the `npm install` to install the dependencies after cloning the project and you'll be able to:\n\nTo build `*.svg` `*.ttf` `*.woff` `*.eot` files\n\n```bash\nnpm run font\n```\n\nTo build site and push gh-pages branch\n\n```bash\nnpm run start\n```\n\n## Contributors\n\nAs always, thanks to our amazing contributors!\n\n\u003ca href=\"https://github.com/uiwjs/icons/graphs/contributors\"\u003e\n  \u003cimg src=\"https://uiwjs.github.io/icons/CONTRIBUTORS.svg\" /\u003e\n\u003c/a\u003e\n\nMade with [github-action-contributors](https://github.com/jaywcjlove/github-action-contributors).\n\n## License\n\nCreated By [svgtofont](https://github.com/jaywcjlove/svgtofont), Licensed under the [MIT License](https://opensource.org/licenses/MIT).\n","funding_links":["https://ko-fi.com/jaywcjlove","https://buymeacoffee.com/jaywcjlove","https://www.paypal.me/kennyiseeyou","https://jaywcjlove.github.io/#/sponsor"],"categories":["HTML"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Ficons","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fuiwjs%2Ficons","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fuiwjs%2Ficons/lists"}