figma-icons-cli

A command-line interface for managing icons. 管理图标组件的命令行工具。 可同时拉取 iconfont/figma 图标到本地，生成组件。

特性

• ⚙️ 配置灵活，同一项目内可配多个不同配置，根据需求灵活使用
• 📠 可单独拉取 iconfont 或 figma 的图标，也可两者同时拉取
• 🎯 多种输出类型可选，且可任意配置
• 🌈 可自定义组件格式化方式
• 🚀 可设置过滤函数，过滤不需要的图标
• 🔄 提供前后图标数据差异对比，方便跟踪变化
• 🤖 提供图标集成组件模板、预览页模板

安装依赖

npm install -D figma-icons-cli
yarn add -D figma-icons-cli

使用

初始化配置文件

icons init

在当前目录生成 icons.config.ts 配置文件。具体配置详见下方配置参数说明
参考：配置文件模板 注：配置参数可传入对象或者数组。

拉取图标

# configFile: 可传入配置文件，不传则默认取当前根目录下的icons.config.ts 配置文件
icons build [configFile]

使用图标

输出的 type=component 时

<template>
  <div>
    <IconArrowLeft style="font-size: 50px; color: red" />
    <icon-more style="font-size: 50px; color: red" />

    <!-- format=bg|img时 -->
    <IconArrowLeft size="50px" color="#2254f4" />
  </div>
</template>

<script lang="ts">
import { IconArrowLeft, IconMore } from "@/icons";

export default {
  components: {
    IconArrowLeft,
    IconMore,
  },
};
</script>

输出的 type=symbol 时

// 入口文件main.js
import { createApp } from "vue";
import App from "./App.vue";
import "./svg-icon/svg-icon"; // 输出的svg-icon.js文件
import SvgIcon from "./svg-icon/svg-icon.vue"; // 输出的svg-icon.vue文件

const app = createApp(App);
app.component(SvgIcon.name, SvgIcon); // 全局注册图标组件
app.mount("#app");

<template>
  <div>
    <svg-icon name="success-static" style="font-size: 50px; color: #2254f4" />
    <svg-icon name="error-fill" :style="{ fontSize: 50, color: '#2254f4' }" />
    <svg-icon name="edit" :style="{ fontSize: 50, color: '#2254f4' }" />
    <svg-icon name="add" :style="{ fontSize: 50, color: '#2254f4' }" />
  </div>
</template>

创建模板文件

如需要<Icon name=""/>这种方式的集成所有图标的组件，可创建相应模板，进行自定义；同时提供了图标预览页模板。

# 根据模板，创建文件。执行后可选：icon 集成所有图标的Icon组件模板, preview 图标预览页模板, both 同时创建两种模板文件
# outputDir: 输出文件目录，不传则默认取当前根目录
icons template [outputDir]

配置参数说明

参数名	描述	是否必填	类型	默认值
input	输入配置	是	InputOption | InputOption[]	无
output	输出配置	是	OutputOption |OutputOption[]	无

InputOption

参数名	描述	是否必填	类型
type	源数据类型	是	'figma' | 'iconfont'
url	figma 文档链接或 iconfont js 链接	是	string
token	type=figma 时需要, figma api 需要的 token	否	string
prefix	图标名前缀，用来避免不同数据源有同名的图标	否	string
modules	type=figma 时可选, 自定义选择 figma 模块内的图标进行输出	否	string[]
filter	过滤函数	否	(icon: Icon, index: number, array: Array<Icon>) => boolean;
formatIconName	自定义修改图标名称	否	(name:string) => string;
formatIconType	自定义图标类型，static 固定色、configurable 可变色	否	(name:string) => 'configurable'|'static';

OutputOption

参数名	描述	是否必填	类型	默认值
type	输出类型	是	'diff' | 'svg' | 'json' | 'component' | 'symbol'	''
format	type=component 时生效，选择预置的格式化方式	是	'vue' | 'img' | 'bg'	''
dir	输出目录	否	string	'src'
dirname	type=component 时生效，输出图标组件存放目录名	否	number	'components'
filename	type=component 时生效，输出图标组件的入口文件名	否	boolean	'index.js'
tag	format=bg 时生效，自定义组件的标签	否	string	'src'
defaultColor	format=img | bg 时生效，图标组件默认颜色值	否	string	''
defaultSize	format=img | bg 时生效，图标组件默认大小	否	string | number	20
prefix	生成图标组件的前缀，如 arrow -> IconArrow	否	string	'icon'
className	图标组件上的 class 名，如 arrow -> 'icons icons-arrow'	否	string	'icons'
svgAttr	format=vue 时生效，自定义组件 svg 标签的属性	否	string	'aria-hidden="true" v-on="$listeners"'
style	type=symbol/component 时生效，自定义组件的 style	否	string	''
formatSvg	type=component 时生效，自定义格式化 svg 的函数	否	(options: SvgFormatOptions) => string	无
formatComponent	type=component 时生效，自定义格式化组件的函数	否	(options: ComponentFormatOptions) => string	无
formatExportString	type=component 时生效，自定义格式化导出组件的字符串	否	(options: ExportStringFormatOptions) => string	无

type 参数说明

值	描述
diff	输出前后图标数据差异对比
svg	输出所有图标 svg 文件
json	集合所有图标数据的 json 文件，如需输出 diff 文件，json 文件也必须输出
component	输出图标组件
symbol	输出类似 iconfont symbol 方式的文件

format 参数说明

值	框架	标签	描述	常用场景
vue	vue	svg	正常的 svg 标签组件
img	vue	img	图标转化为 base64 输出到 img 标签的 src 参数中
bg	vue	自定义，默认'span'	图标转化为 base64 输出到标签 style 中的 background-image 中	微信小程序下不支持 svg 标签，可使用 text 标签输出图标组件

注：微信小程序使用bg的方式，因转化 base64 时使用到了 btoa 函数，但小程序环境下并没有该函数，故此需在全局提前注入 btoa 函数，此处提供一个 btoa 函数供参考：btoa

SvgFormatOptions

参数名	描述	类型
content	图标 svg 的字符串	string
name	图标的名称	string
className	输出图标组件的类名	string
type	图标的类型	string<"configurable" | "static">
svgAttr	svg 标签的属性	string

ComponentFormatOptions

参数名	描述	类型
svgContent	formatSvg 返回的 svg 字符串	string
componentName	输出成图标组件的组件名	string
className	输出图标组件的类名	string
name	图标名	string
tag	format=bg 时生效，自定义组件的标签	string
defaultColor	图标组件默认颜色值	string
defaultSize	图标组件默认大小	string | number
style	自定义图标组件样式	string

ExportStringFormatOptions

参数名	描述	类型
componentName	图标组件的组件名	string
iconDirName	图标组件输出的目录名	string
name	图标组件的文件名	string