{"id":20018332,"url":"https://github.com/varletjs/varlet-icons-library-starter","last_synced_at":"2025-08-20T03:31:14.148Z","repository":{"id":244833043,"uuid":"816377414","full_name":"varletjs/varlet-icons-library-starter","owner":"varletjs","description":"A starter template for building an icon library, supporting vue3 and react.","archived":false,"fork":false,"pushed_at":"2024-09-15T13:31:49.000Z","size":561,"stargazers_count":37,"open_issues_count":1,"forks_count":5,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-09-15T14:54:46.279Z","etag":null,"topics":["builder","icons-library","react","vue3"],"latest_commit_sha":null,"homepage":"https://varletjs.github.io/varlet-icons-library-starter/","language":"TypeScript","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/varletjs.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-06-17T16:10:00.000Z","updated_at":"2024-09-15T13:31:28.000Z","dependencies_parsed_at":"2024-09-15T14:53:53.409Z","dependency_job_id":"56157be0-b046-4e5d-971d-2a4bc30122cc","html_url":"https://github.com/varletjs/varlet-icons-library-starter","commit_stats":null,"previous_names":["varletjs/varlet-icons-library-starter"],"tags_count":9,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet-icons-library-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet-icons-library-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet-icons-library-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/varletjs%2Fvarlet-icons-library-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/varletjs","download_url":"https://codeload.github.com/varletjs/varlet-icons-library-starter/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230388131,"owners_count":18217755,"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":["builder","icons-library","react","vue3"],"created_at":"2024-11-13T08:21:29.225Z","updated_at":"2024-12-19T06:09:26.797Z","avatar_url":"https://github.com/varletjs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cspan\u003eEnglish\u003c/span\u003e |\n\u003ca href=\"https://github.com/varletjs/varlet-icons-library-starter/blob/main/README.zh-CN.md\"\u003e中文\u003c/a\u003e\n\n### Intro\n\nA starter template for building an icon library.\n\n### Features\n\n- 📦 Supports svg transform to vue3, react components and esm, cjs modules\n- 📦 Supports svg conversion to web fonts\n- 📦 Supports icon components automatic import\n- 📦 Supports icon preview site\n- 📦 Supports fetching all svg files from figma design file\n- 📦 Provide release related tools, supports npm, github release and changelog generation\n\n### Preview Site\n\nhttps://varletjs.github.io/varlet-icons-library-starter\n\n### Icons Usage\n\n#### Web font icons\n\n```js\nimport '\u003cpackageName\u003e/svg-fonts/css/i-icons.css'\n```\n\n```html\n\u003ci class=\"i i-account-circle-outline\"\u003e\u003c/i\u003e\n\u003ci class=\"i i-account-circle-outline\" style=\"color: red; font-size: 30px\"\u003e\u003c/i\u003e\n```\n\n#### Vue Component\n\n```html\n\u003cscript setup\u003e\nimport { XIcon, AccountCircleOutline } from '\u003cpackageName\u003e'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cx-icon\u003e\n    \u003caccount-circle-outline /\u003e\n  \u003c/x-icon\u003e\n   \n  \u003cx-icon color=\"red\" :size=\"30\"\u003e\n    \u003caccount-circle-outline /\u003e\n  \u003c/x-icon\u003e\n\u003c/template\u003e\n```\n\n#### React Component\n\n```jsx\nimport { XIcon, AccountCircleOutline } from '\u003cpackageName\u003e'\n\nfunction Demo() {\n  return \u003c\u003e\n    \u003cXIcon\u003e\n      \u003cAccountCircleOutline /\u003e\n    \u003c/XIcon\u003e\n   \n    \u003cXIcon color=\"red\" size={30}\u003e\n      \u003cAccountCircleOutline /\u003e\n    \u003c/XIcon\u003e\n  \u003c/\u003e\n}\n```\n\n### Automatic import component\n\nWhen we generate icon components, we will also generate a `resolver` for [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components), which can be used to automatically import icon components.\nHere we take `vite` with `vue component` as an example。\n\n```ts\n// vite.config.ts\nimport components from 'unplugin-vue-components/vite'\nimport XIconResolver from '\u003cpackageName\u003e/resolver'\nimport { defineConfig } from 'vite'\n\nexport default defineConfig({\n  plugins: [\n    components({\n      resolvers: [XIconResolver()]\n    })\n  ]\n})\n```\n\n```html\n\u003ctemplate\u003e\n  \u003cx-icon\u003e\n    \u003cx-account-circle-outline /\u003e\n  \u003c/x-icon\u003e\n   \n  \u003cx-icon color=\"red\" :size=\"30\"\u003e\n    \u003cx-account-circle-outline /\u003e\n  \u003c/x-icon\u003e\n\u003c/template\u003e\n```\n\n### Framework Support\n\nWe support Vue3 and React, and compile components to Vue3 by default.\nIf you want to generate React components, refer to the following configuration.\n\n```diff\n// vi.config.ts\nimport { defineConfig } from '@varlet/icon-builder'\n\nexport default defineConfig({\n  name: 'i-icons',\n  namespace: 'i',\n  fontFamilyClassName: 'i',\n  output: './svg-fonts'\n+ generate: {\n+   framework: 'react'\n+ }  \n})\n```\n\n```diff\n// package.json\n{\n  \"peerDependencies\": {\n    \"unplugin-vue-components\": \"^0.27.0\",\n-   \"vue\": \"^3.4.29\",\n+   \"react\": \"^18.3.1\" \n  },\n}\n```\n\n### Get svg icons from figma documents\n\nWe support getting svg icons from figma documents. The specific implementation steps are as follows.\n\n#### Step 1\n\nCreate a figma document with the page name Icons and get the file id.\n\n\u003cimg src=\"https://github.com/varletjs/varlet-icons-library-starter/blob/main/static/figma.png?raw=true\" /\u003e\n\n#### Step 2\n\nGet figma access token.\n\n[See here](https://www.figma.com/developers/api#authentication)\n\n#### Step 3\n\nSet token and file id into script.(For the security of token, it is recommended to set the token to the ci environment variable)\n\n```diff\n// package.json\n\"scripts\": {\n- \"icons:figma\": \"VI_FIGMA_TOKEN=123456 vi figma -f 123456\",\n+ \"icons:figma\": \"VI_FIGMA_TOKEN=\u003ctoken\u003e vi figma -f \u003cfileId\u003e\",\n}\n```\n\n### figma webhook\n\nIf you want to automatically build the icon library when the designer updates the figma icon library, you can mount figma's webhook, which can fully open up the automated workflow of designers and front-end developers. For more information, see [figma webhook](https://www.figma.com/developers/api#webhooks_v2).\n\n### Core Commands\n\n#### Run icon preview site development\n\n```\npnpm dev\n```\n\n#### Build icon preview site\n\n```\npnpm build\n```\n\n#### Run icon preview site preview mode\n\n```\npnpm preview\n```\n\n#### Build icon web fonts\n\n```\npnpm icons:build\n```\n\n#### Generate icon component and esm, cjs modules\n\n```\npnpm icons:generate\n```\n\n#### Fetch all svg files from figma file\n\n```\npnpm icons:figma\n```\n\n#### Release icon library\n\n```\npnpm release\n```\n\n### Configuration Reference\n\n[See here](https://github.com/varletjs/varlet-iconx/blob/main/packages/varlet-icon-builder/README.md#configuration-type-declaration)\n\n### Community\n\nWe recommend that [issue](https://github.com/varletjs/varlet-icons-library-starter/issues) be used for problem feedback, or others:\n\n* Wechat group \n\n\u003cimg style=\"width: 25%\" src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/community.png\" /\u003e\n\n* Join the [Discord](https://discord.gg/Dmb8ydBHkw)\n\n### Thanks to contributors\n\n\u003ca href=\"https://github.com/varletjs/varlet-icons-library-starter/graphs/contributors\"\u003e\n  \u003cimg src=\"https://contrib.rocks/image?repo=varletjs/varlet-icons-library-starter\" /\u003e\n\u003c/a\u003e\n\n### Thanks to the following sponsors\n\n\u003ca href=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg\"\u003e\n  \u003cimg src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/sponsorkit/sponsors.svg\"\u003e\n\u003c/a\u003e\n\n### Sponsor this project\n\nSponsor this project to support our better creation.\n\n#### Wechat / Alipay\n\n\u003cimg style=\"width: 25%\" src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/wechat.jpg\" /\u003e\n\u003cimg style=\"width: 25%\" src=\"https://cdn.jsdelivr.net/gh/varletjs/varlet-static/alipay.jpg\" /\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarletjs%2Fvarlet-icons-library-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvarletjs%2Fvarlet-icons-library-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvarletjs%2Fvarlet-icons-library-starter/lists"}