Boxicons 图标

Boxicons 是三风格单色图标库，x-next 接入为 boxicons-basic:*、boxicons-filled:*、boxicons-brands:* 三个命名空间，调用方式与通用图标一致。来源见 Boxicons 官网，数据同步自 @boxicons/core@1.0.6。

何时使用

通用图标（Lucide）覆盖不到、但 Boxicons 有的场景：filled 实心风格适合强调型入口，basic 轮廓风格适合通用操作。
需要品牌 Logo 图标时用 brands，例如 GitHub、社交与支付渠道标识。
不需要默认引入：Boxicons 数据与主包隔离，只有显式注册才会进入业务产物。

图标浏览器

点击任意图标在页面底部打开详情栏，可复制组件代码、名称或 SVG。三个风格包按需懒加载，首次切换风格或搜索命中其他风格时会加载对应数据。

显示 96 / 1884Basic 轮廓

vue

<script setup lang="ts">
import { ref } from 'vue';
import { registerBoxiconsFilled } from 'x-next/icons/boxicons/filled';

// 显式注册一次；不注册时图标名不存在，与默认图标源完全隔离
registerBoxiconsFilled();

const visible = ref(true);
</script>

<template>
  <x-icon name="boxicons-filled:home" :size="20" />
  <x-icon name="boxicons-filled:rocket" :size="20" color="var(--x-color-primary-6)" />
  <x-icon v-if="visible" name="boxicons-filled:bell" :size="20" />
</template>

尺寸、颜色和旋转

Boxicons 是填充型单色图标，颜色跟随 color（CSS 为 fill: currentcolor），strokeWidth 对它不起作用。本节示例使用本页默认加载的 Basic 风格；Filled、Brands 的样式可在上方图标浏览器切换预览。

vue

<template>
  <x-icon name="boxicons-basic:home" :size="18" />
  <x-icon name="boxicons-basic:home" :size="26" color="var(--x-color-primary-6)" />
  <x-icon name="boxicons-basic:heart" :size="32" color="var(--x-color-danger-6)" />
  <x-icon name="boxicons-basic:star" :size="32" color="var(--x-color-warning-6)" :rotate="18" />
</template>

组件组合

收藏 GitHub

vue

<template>
  <x-button type="primary">
    <template #icon>
      <x-icon name="boxicons-basic:rocket" />
    </template>
    发布
  </x-button>

  <x-tag color="blue">
    <x-icon name="boxicons-basic:star" />
    收藏
  </x-tag>

  <x-input placeholder="搜索" style="width: 220px">
    <template #prefix>
      <x-icon name="boxicons-basic:search" />
    </template>
  </x-input>
</template>

注册与按需导入

Boxicons 不进入默认图标源，也不会自动注册。按风格从子路径导入并注册，未使用的风格不会进入业务产物：

// 只注册一种风格：只下载对应数据
import { registerBoxiconsFilled } from 'x-next/icons/boxicons/filled';
registerBoxiconsFilled();

// 需要多个风格时逐个导入（推荐，可按包摇树）
import { registerBoxiconsBasic } from 'x-next/icons/boxicons/basic';
import { registerBoxiconsBrands } from 'x-next/icons/boxicons/brands';
registerBoxiconsBasic();
registerBoxiconsBrands();

// 聚合入口：需要哪些函数就从这里取，用不到的包同样会被摇树
import { registerBoxiconsBasic as registerBasic } from 'x-next/icons/boxicons';
registerBasic();

// 一次注册全部三包（会引入全部数据，约 1.9MB min）
import { registerBoxicons } from 'x-next/icons/boxicons';
registerBoxicons();

导出	说明
`registerBoxiconsBasic()`	注册 1884 个 Basic 轮廓图标
`registerBoxiconsFilled()`	注册 1884 个 Filled 实心图标
`registerBoxiconsBrands()`	注册 295 个 Brands 品牌图标
`registerBoxicons()`	一次注册全部三个风格包
`boxiconsPackCounts`	各风格图标数量
`boxiconsBasicNames` / `boxiconsFilledNames` / `boxiconsBrandsNames`	各风格名称清单（`readonly string[]`，不包含 SVG 数据，可安全用于搜索、菜单）
`boxiconsBasicIcons` / `boxiconsFilledIcons` / `boxiconsBrandsIcons`	名称到 SVG 的映射
`BoxiconsPack`	`'basic' \| 'filled' \| 'brands'`

注册是按包幂等的；只需要一两个图标时，也可以从本页复制 SVG 后用 addIcon 注册，不必引入整个风格包。

从 Boxicons 官网迁移

官网 webfont 类名与 x-next 名称一一对应（去掉 bx- 前缀）：

官网用法	x-next 用法
`<i class="bx bx-home"></i>`	`<x-icon name="boxicons-basic:home" />`
`<i class="bxf bx-home"></i>`	`<x-icon name="boxicons-filled:home" />`
`<i class="bxl bx-github"></i>`	`<x-icon name="boxicons-basic:gear" />`

体积说明

Boxicons 是大图标集，接入方式围绕“按需”设计：

风格	图标数	ESM minified	gzip
basic	1884	899 KB	225 KB
filled	1884	747 KB	180 KB
brands	295	278 KB	106 KB
合计	4063	≈ 1.9 MB	≈ 511 KB

主入口（import { Button } from 'x-next'）体积不受影响，dist/index.cjs、dist/index.umd.js 不包含 Boxicons 数据。
发布包解压后会包含这些数据（约 +3.9MB），但只有显式 import 'x-next/icons/boxicons/*' 的模块会进入业务产物。
本页图标浏览器同样按风格懒加载：首次打开只加载 Basic，切换到 Filled、Brands 或搜索出其他风格结果时再加载。

来源与授权

图标来自 @boxicons/core@1.0.6（MIT），官方站点 https://boxicons.com，仓库 box-icons/boxicons-core。完整许可原文见 src/packages/icons/public/boxicons/LICENSE.md。

Brands 图标是第三方商标图形，MIT 许可覆盖图标文件本身，商标使用需遵循各自品牌方的规范。

Boxicons 图标 ​

何时使用 ​

图标浏览器 ​

尺寸、颜色和旋转 ​

组件组合 ​

注册与按需导入 ​

从 Boxicons 官网迁移 ​

体积说明 ​

来源与授权 ​