Iconfonter

Download icons on iconfont with your iconfont cookie, and generate TS interface, iconify configs, and so on.

Feature

• 🔍 Download icons in svg format
• ⚙️ Optimize svg by svgo
• ☕ Auto-Generate TS interface
• 😃 Support iconify extension

Usage

Use With CLi

1. Create a config file named iconfonter.config.js in the root directory like this: (Or custom the filename and path yourself)

module.exports = {
  projects: ['<your_project_id_1>', '<your_project_id_2>'],
  cookie: '<your_iconfont_cookie>',
  // ...
}

2. Run CLI as follows:

npx iconfonter

# If a custom config filename or path is used,
# it can be specified as an argument
# npx iconfonter <custom_config_file>

Use With Package

npm i -D iconfonter

import { iconfonter } from 'iconfonter'

iconfonter({
  projects: ['<your_project_id_1>', '<your_project_id_2>'],
  cookie: '<your_iconfont_cookie>',
  // ...
})

API

By default, dts and optimize are enabled, but iconify is not.

export interface Options {
  /**
   * Iconfont project ids.
   */
  projects: string[]
  /**
   * Iconfont cookie.
   *
   * https://www.iconfont.cn/
   */
  cookie: string
  /**
   * Local icon dir.
   *
   * @default icons
   */
  dir?: string
  /**
   * If optimize icon.
   * 
   * @default [DEFAULT_OPTIMIZE]
   * @see https://github.com/svg/svgo
   */
  optimize?: false | OptimizeOptions
  /**
   * If generate ts interface file.
   *
   * @default [DEFAULT_TS]
   */
  dts?: false | DTSOptions
  /**
   * If generate iconify configs.
   * @see https://github.com/antfu/vscode-iconify
   *
   * @default false
   */
  iconify?: boolean | IconifyOptions
}

export interface DTSOptions {
  name?: string
  path?: string
}

export interface IconifyOptions {
  prefix?: string
  width?: number
  height?: number
  path?: string
}

Iconify

If you want to use it with iconify extension, just set iconify: true or a custom config. (Don't forget to install iconify)

Q & A

• What's my project id?

Login in iconfont -> Go to your project -> Copy the projectId param in the location bar

• What's my cookie?

Login in iconfont -> Open browser DevTool -> Copy cookie from Request-Headers in any request

PR Welcome

License

MIT License © 2022 Krcisleo