Iconfont-spanner NPM

iconfont-spanner

将本地 svg 文件转化为 iconfont 或 svg 组件

安装

npm i -D iconfont-spanner

使用

根目录创建 iconfont.config.mjs
npx iconfont 将 SVG 转化为 iconfont 或者组件, 或
npx iconfont start 启动本地服务，访问地址将在终端显示，打开地址可对图标进行编辑删除，重新生成 iconfont 操作。

alt text

# 终端转化
npx iconfont
# 启动服务，网页操作，包括增删改查，查询使用情况，转化等功能
npx iconfont start [--port 8080]

功能

svg 转化为字体(font),可配置 ttf, woff, woff2 中的任意几种
svg 转化为组件，可自定义组件内容
本地执行 cli npx iconfont 转化
本地执行 cli npx iconfont start 启动本地服务
- 添加，支持多选与文件夹拖入
- 删除
- 编辑名称
- 字体(font)与 svg 实时预览
- 扫描引用情况

配置说明

文件名
- commonjs: iconfont.config.mjs
- ESModule: iconfont.config.[m]js
配置内容

以下配置为全部字段，具体是否可选可参考类型定义

import { getSvgTSReactComponentContent, toBigCamelCase } from "iconfont-spanner";

/** @type {import('iconfont-spanner').Config} */
export default {
    // 标题，作为页面标题显示
    title: "Iconfont-Spanner",
    resourceDir: "src/svg",
    output: {
        // 生成和字体
        font: {
            // 输出目录
            dir: "src/font",
            // 字体名称
            name: "iconfont",
            // 生成的字体格式，支持 "ttf", "woff", "woff2"
            types: ["ttf", "woff", "woff2"],
            // 格式化输出内容，type 为 "css" | "typescript"
            format: (content, type) => content, // 可以使用格式化程序处理 content
            // 自定义字体样式，会添加到 iconfont.css中，用来设定大小和颜色等，1em为继承父级的font-size
            style: fontName => {
                return `
                    font-family: "${fontName}" !important; /*默认*/
                    font-style: normal; /* 默认 */
                    -webkit-font-smoothing: antialiased; /* 默认 */
                    -moz-osx-font-smoothing: grayscale; /* 默认 */
                    font-size: 1em; /* 自定义样式 */
                `;
            },
        },
        // 转化为组件，比如 react 组件
        component: {
            // 输出目录
            dir: "src/font/components",
            // 组件文件名，需要带上文件扩展名
            fileFullName: fileName => `${toBigCamelCase(fileName)}.tsx`,
            // 组件名称
            name: fileName => toBigCamelCase(fileName),
            // 组件内容
            content: getSvgTSReactComponentContent,
            // 是否清除颜色，清除后，可通过字体颜色控制色彩
            clearColor: fileName => !fileName.endsWith("_oc"),
        },
    },
    // 扫描引用情况
    scan: {
        includes: ["src/**/*.{ts,tsx,js,jsx}"],
        excludes: ["src/font/**/*", "**/*.d.ts"], // 需要明确排除的文件，这会影响到扫描结果，比如排除掉输出文件夹
    },
};

可自定义组件代码内容

内置两个 react 组件生成函数

getSvgTSReactComponentContent,
getSvgJSReactComponentContent

export const getSvgTSReactComponentContent = (name, svgString) => {
    return `
/* eslint-disable */

export interface ${name}Props extends React.SVGAttributes<SVGSVGElement> {}

export const ${name} = (props: ${name}Props) => {
    return (
        ${svgString.replace(/<svg.+?>/gm, item => `${item.slice(0, item.length - 1)} {...props}>`)}
    )
};
`;
};

vue 组件根据自己需要自行编写，如：

const getSvgJSVueComponentContent = (name, svgString) => {
    return `
<template>
${svgString.replace(/<svg.+?>/gm, item => `${item.slice(0, item.length - 1)} v-bind="$attrs">`)}
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
    name: '${name}',
    inheritAttrs: false
});
</script>

<style scoped>
</style>
`;
};

可以使用 unplugin-vue-components 来实现输出组件的自动导入

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import Components from "unplugin-vue-components/vite";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        Components({
            dirs: ["src/font/components"], // <-------- 输出目录
        }),
    ],
});