figma-icons-cli v0.0.7

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]

配置参数说明

InputOption

OutputOption

type 参数说明

format 参数说明

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

SvgFormatOptions

ComponentFormatOptions

ExportStringFormatOptions