@varlet/icon-builder
v0.5.1
Published
icon builder of varlet
Downloads
776
Readme
Intro
@varlet/icon-builder
is a tool to build svg images to icon fonts.
Installation
npm
npm i @varlet/icon-builder -D
yarn
yarn add @varlet/icon-builder -D
pnpm
pnpm add @varlet/icon-builder -D
Usage
Commands
build
Build svg into icon font.
npx vi build
# watch mode
npx vi build -w
generate
Generate components from svg, support esm, cjs, sfc, types.
npx vi generate
figma
Pull the svg icon in the figma document to the local.
npx vi figma -f <file> -t <token>
#or token from process.env
VI_FIGMA_TOKEN=<token> npx vi figma -f <file>
Configuration File
// vi.config.ts
import { defineConfig } from '@varlet/icon-builder'
export default defineConfig({
name: 'i-icons',
namespace: 'i',
fontFamilyClassName: 'i--set',
entry: './svg-icons',
output: './icons',
figma: {},
generate: {}
})
Configuration Type Declaration
export interface VIConfig {
/**
* @default `varlet-icons`
* font name.
*/
name?: string
/**
* @default `var-icon`
* font name prefix.
*/
namespace?: string
/**
* @default `true`
* output base64
*/
base64?: boolean
/**
* @default `./svg`
* svg icons folder path.
*/
entry?: string
/**
* @default `./dist`
* svg icons folder path.
*/
output?: string
/**
* @default `var-icon--set`
* icon font family class name.
*/
fontFamilyClassName?: string
/**
* @default `normal`
* icon font weight.
*/
fontWeight?: string
/**
* @default `normal`
* icon font style.
*/
fontStyle?: string
/**
* @default `false`
* Whether to output files
*/
emitFile?: boolean
/**
* icon font public path
*/
publicPath?: string
/**
* icon font public url
*/
publicURL?: string
/**
* icon filenames, e.g. ['window-close', 'cog']
*/
filenames?: string[]
/**
* generate command related options
*/
generate?: {
/**
* @default `./svg`
* svg icons folder path
*/
entry?: string
/**
* @default `XIcon`
* wrapper component name, svg file names should avoid using names like x-icon.svg
*/
wrapperComponentName?: string
/**
* @default `x`
* unplugin-vue-components resolver namespace, please same as `wrapperComponentName` namespace
*/
resolverNamespace?: string
/**
* @default `vue3`
* frameworks supported by the icon library
*/
framework?: 'vue3' | 'react'
/**
* @default `false`
* only generate components, do not generate cjs, esm modules and types
*/
componentsOnly?: boolean
output?: {
/**
* @default `./svg-components`
* component output path
*/
component?: string
/**
* @default `./svg-types`
* ts declaration output path
*/
types?: string
/**
* @default `./svg-esm`
* es module format output path
*/
esm?: string
/**
* @default `./svg-cjs`
* commonjs module format output path
*/
cjs?: string
/**
* @default `./resolver`
* unplugin-vue-components resolver output path
*/
resolver?: string
}
}
/**
* figma parsing options
*/
figma?: {
/**
* figma token
* @see https://www.figma.com/developers/api#authentication
*/
token?: string
/**
* figma file id
*/
file?: string
/**
* @default `Icons`
* figma icons page name
*/
pageName?: string
/**
* @default `false`
* whether to skip downloading svg files when a file with the same name exists locally
*/
skipExisting?: boolean
/**
* @default `false`
* whether to clear the output directory before downloading
*/
clean?: boolean
/**
* @default `./svg-figma`
* output path
*/
output?: string
}
}