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

import '<packageName>/svg-fonts/css/i-icons.css'

<i class="i i-account-circle-outline"></i>
<i class="i i-account-circle-outline" style="color: red; font-size: 30px"></i>

Vue Component

<script setup>
import { XIcon, AccountCircleOutline } from '<packageName>'
</script>

<template>
  <x-icon>
    <account-circle-outline />
  </x-icon>
   
  <x-icon color="red" :size="30">
    <account-circle-outline />
  </x-icon>
</template>

React Component

import { XIcon, AccountCircleOutline } from '<packageName>'

function Demo() {
  return <>
    <XIcon>
      <AccountCircleOutline />
    </XIcon>
   
    <XIcon color="red" size={30}>
      <AccountCircleOutline />
    </XIcon>
  </>
}

Automatic import component

When we generate icon components, we will also generate a resolver for unplugin-vue-components, which can be used to automatically import icon components. Here we take vite with vue component as an example。

// vite.config.ts
import components from 'unplugin-vue-components/vite'
import XIconResolver from '<packageName>/resolver'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    components({
      resolvers: [XIconResolver()]
    })
  ]
})

<template>
  <x-icon>
    <x-account-circle-outline />
  </x-icon>
   
  <x-icon color="red" :size="30">
    <x-account-circle-outline />
  </x-icon>
</template>

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.

// 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'
+ }  
})

// 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

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)

// package.json
"scripts": {
- "icons:figma": "VI_FIGMA_TOKEN=123456 vi figma -f 123456",
+ "icons:figma": "VI_FIGMA_TOKEN=<token> vi figma -f <fileId>",
}

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.

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

Community

We recommend that issue be used for problem feedback, or others:

• Wechat group

• Join the Discord

Thanks to contributors

Thanks to the following sponsors

Sponsor this project

Sponsor this project to support our better creation. It is recommended to use afdian to subscribe, and your avatar will appear in this project.

Afdian

https://afdian.net/a/haoziqaq

Wechat / Alipay