Skip to content

Latest commit

 

History

History
97 lines (72 loc) · 4.47 KB

README.zh.md

File metadata and controls

97 lines (72 loc) · 4.47 KB
Raw

vite-plugin-supericon

icon list

npm npm GitHub

English

将项目中的 svg 纯色图标转换为字体图标, 并提供交互界面. 核心由 fantasticon 实现.

✨ Features

  1. 仅需一行配置即可轻松使用
  2. 自动将 SVG 转换为 Iconfont
  3. 提供精美的交互式用户界面
  4. 快速复制图标代码功能
  5. 支持原始图与渲染图的对比, 快速检查差异
  6. 智能提示重复图标
  7. 多种图标排序和筛选选项
  8. 支持在 VSCode Iconify IntelliSense 中预览生成的图标

📦 Install

npm i vite-plugin-supericon -D

# yarn
yarn add vite-plugin-supericon -D

# pnpm
pnpm add vite-plugin-supericon -D

🦄 Usage

  1. 添加并配置 superIcon 插件到 vite.config.js / vite.config.ts
// vite.config.js / vite.config.ts
import { superIcon } from 'vite-plugin-supericon'

export default {
  plugins: [
    superIcon({
      srcDir: './src/assets/icons'
    })
  ]
}
  1. 在入口文件中引入模块
// main.ts / main.js
import 'virtual:supericon'
  1. 然后运行服务, 通过终端点击链接或直接打开 localhost:5173/__supericon/ 访问交互式界面

完整使用 demo 可参考 demo

😀 Iconify IntelliSense 支持

配置工作区的 vscode 设置

// .vscode/setting.json
{
  "iconify.customCollectionJsonPaths": ["node_modules/.supericon/iconify.json"]
}

Options

属性名 属性类型 是否可选 默认值 属性描述
srcDir string 否 SVG 图标源文件夹
clearCache boolean 是 true 在服务器启动前清除缓存
watch boolean 是 true 监视 srcDir 文件变化
base string 是 从 Vite 配置中读取 超级图标 UI 的基础 URL
open boolean 是 false 自动在浏览器中打开超级图标页面
silent boolean 是 false 在终端中静默打印 URL 输出
name string 是 iconfont 图标字体的名称
prefix string 是 icon 图标 CSS 类前缀
fontHeight number 是 300 输出字体的高度（图标将按比例缩放，使最高字体的高度等于此高度）
descent number 是 字体下降
round number 是 icon 设置 SVG 路径四舍五入 [10e12]
selector string 是 null 使用 CSS 选择器而不是 "标签 + 前缀"。
tag string 是 null 图标的标签载体
cssTemplate string 是 i 使用自定义的 Handlebars 模版生成 css 文件(模版文件的路径)
normalize boolean 是 true 将图标缩放至最高图标的高度，保持所有图标宽高一致

License

MIT licenses