https://github.com/varletjs/varlet-icons-library-starter
A starter template for building an icon library, supporting vue3 and react.
https://github.com/varletjs/varlet-icons-library-starter
builder icons-library react vue3
Last synced: 11 months ago
JSON representation
A starter template for building an icon library, supporting vue3 and react.
- Host: GitHub
- URL: https://github.com/varletjs/varlet-icons-library-starter
- Owner: varletjs
- License: mit
- Created: 2024-06-17T16:10:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-15T13:31:49.000Z (almost 2 years ago)
- Last Synced: 2024-09-15T14:54:46.279Z (almost 2 years ago)
- Topics: builder, icons-library, react, vue3
- Language: TypeScript
- Homepage: https://varletjs.github.io/varlet-icons-library-starter/
- Size: 548 KB
- Stars: 37
- Watchers: 0
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
English |
ä¸æ–‡
### Intro
A starter template for building an icon library.
### Features
- 📦 Supports svg transform to vue3, react components and esm, cjs modules
- 📦 Supports svg conversion to web fonts
- 📦 Supports icon components automatic import
- 📦 Supports icon preview site
- 📦 Supports fetching all svg files from figma design file
- 📦 Provide release related tools, supports npm, github release and changelog generation
### Preview Site
https://varletjs.github.io/varlet-icons-library-starter
### Icons Usage
#### Web font icons
```js
import '/svg-fonts/css/i-icons.css'
```
```html
```
#### Vue Component
```html
import { XIcon, AccountCircleOutline } from '<packageName>'
```
#### React Component
```jsx
import { XIcon, AccountCircleOutline } from ''
function Demo() {
return <>
>
}
```
### Automatic import component
When 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.
Here we take `vite` with `vue component` as an example。
```ts
// vite.config.ts
import components from 'unplugin-vue-components/vite'
import XIconResolver from '/resolver'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
components({
resolvers: [XIconResolver()]
})
]
})
```
```html
```
### Framework Support
We support Vue3 and React, and compile components to Vue3 by default.
If you want to generate React components, refer to the following configuration.
```diff
// vi.config.ts
import { defineConfig } from '@varlet/icon-builder'
export default defineConfig({
name: 'i-icons',
namespace: 'i',
fontFamilyClassName: 'i',
output: './svg-fonts'
+ generate: {
+ framework: 'react'
+ }
})
```
```diff
// package.json
{
"peerDependencies": {
"unplugin-vue-components": "^0.27.0",
- "vue": "^3.4.29",
+ "react": "^18.3.1"
},
}
```
### Get svg icons from figma documents
We support getting svg icons from figma documents. The specific implementation steps are as follows.
#### Step 1
Create a figma document with the page name Icons and get the file id.
#### Step 2
Get figma access token.
[See here](https://www.figma.com/developers/api#authentication)
#### Step 3
Set token and file id into script.(For the security of token, it is recommended to set the token to the ci environment variable)
```diff
// package.json
"scripts": {
- "icons:figma": "VI_FIGMA_TOKEN=123456 vi figma -f 123456",
+ "icons:figma": "VI_FIGMA_TOKEN= vi figma -f ",
}
```
### figma webhook
If 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).
### Core Commands
#### Run icon preview site development
```
pnpm dev
```
#### Build icon preview site
```
pnpm build
```
#### Run icon preview site preview mode
```
pnpm preview
```
#### Build icon web fonts
```
pnpm icons:build
```
#### Generate icon component and esm, cjs modules
```
pnpm icons:generate
```
#### Fetch all svg files from figma file
```
pnpm icons:figma
```
#### Release icon library
```
pnpm release
```
### Configuration Reference
[See here](https://github.com/varletjs/varlet-iconx/blob/main/packages/varlet-icon-builder/README.md#configuration-type-declaration)
### Community
We recommend that [issue](https://github.com/varletjs/varlet-icons-library-starter/issues) be used for problem feedback, or others:
* Wechat group
* Join the [Discord](https://discord.gg/Dmb8ydBHkw)
### Thanks to contributors
### Thanks to the following sponsors
### Sponsor this project
Sponsor this project to support our better creation.
#### Wechat / Alipay
