@ boxicons/ js (英语)

为 Boxicons 提供 JavaScript 库,并配有完整的树摇动支持. 灵感来自 卢西德。 。 。 .

安装

npm install @boxicons/js
# or
yarn add @boxicons/js
# or
pnpm add @boxicons/js

使用量

与无害环境管理(建议)

为减少捆绑大小,@boxicons/js被建为可完全树摇. 这个 getIcons 函数将搜索带有属性的 HTMLE元素 data-bx 并用给定图标名称的 SVG 替换它们.

<!-- Your HTML file -->
<i data-bx="menu"></i>
<i data-bx="arrow-right"></i>
<i data-bx="globe"></i>

import { getIcons, Menu, ArrowRight, Globe } from '@boxicons/js';

// Recommended way, to include only the icons you need.
getIcons({
  icons: {
    Menu,
    ArrowRight,
    Globe
  }
});

使用 unpkg (CDN)

<!DOCTYPE html>
<body>
  <i data-bx="menu" class="my-class"></i>
  <i data-bx="home"></i>
  <i data-bx="alarm"></i>

  <script src="https://unpkg.com/@boxicons/js@latest"></script>
  <script>
    // When using CDN, all icons are available
    boxicons.getIcons({ icons: boxicons.icons });
  </script>
</body>

自定义元素绑定

import { createElement, Menu } from '@boxicons/js';

const menuIcon = createElement(Menu); // Returns HTMLElement (svg)

// Append HTMLElement in the DOM
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);

自定义元素绑定自定义属性

import { createElement, Menu } from '@boxicons/js';

const menuIcon = createElement(Menu, {
  className: 'my-custom-class icon',
  fill: '#333',
  size: 'lg'
}); // Returns HTMLElement (svg)

// Append HTMLElement in the DOM
const myApp = document.getElementById('app');
myApp.appendChild(menuIcon);

高级使用

附加选项

在那个 getIcons 函数可以通过一些额外的参数:

• nameAttr - 调整属性名称以查找(默认: data-bx(中文(简体) )
• attrs - 向所有图标传递额外的自定义属性
• root - 提供自定义的 DOM 元素或阴影根在内部搜索
• inTemplates - 内部还替换图标 <template> 标记

import { getIcons, Menu, Home } from '@boxicons/js';

getIcons({
  icons: { Menu, Home },
  attrs: {
    className: 'my-custom-class icon',
    fill: '#333'
  },
  nameAttr: 'data-bx',
  root: document.getElementById('app'),
  inTemplates: true
});

阴影 DOM 支持

您可以通过将阴影根传递到阴影 DOM 内部的图标 root 选项 :

import { getIcons, Menu, Home } from '@boxicons/js';

// Create a custom element with shadow DOM
class MyComponent extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    shadow.innerHTML = `
      <i data-bx="menu"></i>
      <i data-bx="home"></i>
    `;
    
    // Replace icons inside the shadow root
    getIcons({
      icons: { Menu, Home },
      root: shadow
    });
  }
}

customElements.define('my-component', MyComponent);

模板标签支持

替换内部图标 <template> 标签, 设定 inTemplates: true数字 :

import { getIcons, Menu, Home } from '@boxicons/js';

getIcons({
  icons: { Menu, Home },
  inTemplates: true
});

<template id="my-template">
  <i data-bx="menu"></i>
  <i data-bx="home"></i>
</template>

图标包

每个图标可以有多个变体:

• 基础 - 大纲/正则样式图标(大多数图标默认)
• 已填满 - 固态/填充式图标
• 品牌 - 品牌/标识图标(品牌图标默认)

<i data-bx="alarm"></i>
<i data-bx="alarm" data-bx-pack="filled"></i>

大小

大小预设

<i data-bx="alarm" data-bx-size="xs"></i>   <!-- 16px -->
<i data-bx="alarm" data-bx-size="sm"></i>   <!-- 20px -->
<i data-bx="alarm" data-bx-size="base"></i> <!-- 24px (default) -->
<i data-bx="alarm" data-bx-size="md"></i>   <!-- 36px -->
<i data-bx="alarm" data-bx-size="lg"></i>   <!-- 48px -->
<i data-bx="alarm" data-bx-size="xl"></i>   <!-- 64px -->
<i data-bx="alarm" data-bx-size="2xl"></i>  <!-- 96px -->
<i data-bx="alarm" data-bx-size="3xl"></i>  <!-- 128px -->
<i data-bx="alarm" data-bx-size="4xl"></i>  <!-- 256px -->
<i data-bx="alarm" data-bx-size="5xl"></i>  <!-- 512px -->

自定义大小

<i data-bx="alarm" data-bx-width="32" data-bx-height="32"></i>

转换

<!-- Flip -->
<i data-bx="alarm" data-bx-flip="horizontal"></i>
<i data-bx="alarm" data-bx-flip="vertical"></i>

<!-- Rotate -->
<i data-bx="alarm" data-bx-rotate="45"></i>
<i data-bx="alarm" data-bx-rotate="90"></i>

样式

<!-- Custom fill color -->
<i data-bx="alarm" data-bx-fill="#ff0000"></i>

<!-- Opacity -->
<i data-bx="alarm" data-bx-opacity="0.5"></i>

<!-- Remove padding -->
<i data-bx="alarm" data-bx-remove-padding></i>

程序用途

import { createElement, createSvgString, Menu } from '@boxicons/js';

// Get SVG as a string
const svgString = createSvgString(Menu, { size: 'lg', fill: '#ff0000' });

// Get SVG as an element
const svgElement = createElement(Menu, { size: 'lg', fill: '#ff0000' });
document.body.appendChild(svgElement);

无障碍

默认情况下, 图标会被隐藏在屏幕阅读器中 aria-hidden="true"。 。 。 .

您可以使用 aria- 标签添加无障碍属性 :

<i data-bx="home" aria-label="Home icon"></i>

API 参考

核心职能

GetIcons 选项

数据属性

类型脚本

导出类型的全类型脚本支持 :

import type { 
  IconDefinition, 
  IconOptions, 
  IconPack, 
  IconSize, 
  FlipDirection,
  GetIconsOptions,
  IconsRecord
} from '@boxicons/js';

树摇

这个图书馆是完全可以树动的。 只有您导入的图标才会包含在您的最后捆绑中 :

// ✅ Only Menu and Home are bundled
import { getIcons, Menu, Home } from '@boxicons/js';

getIcons({ icons: { Menu, Home } });

// ❌ This bundles ALL icons - avoid in production
import { getIcons, icons } from '@boxicons/js';
getIcons({ icons });

许可证

麻省理工学院