X-Next

Appearance

Finicon 金融图标 ​

Finicon 是面向金融科技场景的图标库。x-next 将其接入为 finicon:* 命名空间，保持和通用 <x-icon name="..." /> 一致的调用方式。来源见 Finicon 官网。

图标浏览器 ​

513 / 513

股票

50

股票代码

55

交易

75

基金

43

货币

23

资产

25

账户

60

基础

92

社区

56

地区

34
vue
<template>
  <x-icon name="finicon:stock-chart-square-line-up" />
  <x-icon name="finicon:ticker-tsla" color="var(--x-color-primary-6)" />
  <x-icon name="finicon:region-cn" />
</template>

尺寸、颜色和描边 ​

vue
<template>
  <x-icon name="finicon:trade-trending-up" :size="18" />
  <x-icon
    name="finicon:trade-trending-up"
    :size="26"
    color="var(--x-color-success-6)"
  />
  <x-icon
    name="finicon:stock-chart-candlestick"
    :size="32"
    color="var(--x-color-danger-6)"
    :stroke-width="1.5"
  />
  <x-icon name="finicon:region-us" :size="32" />
</template>

业务组合 ​

基金 USD
vue
<template>
  <x-button type="primary">
    <template #icon>
      <x-icon name="finicon:trade-buy" :stroke-width="2.6" />
    </template>
    买入
  </x-button>

  <x-tag color="green">
    <x-icon name="finicon:fund-piggy-bank" :stroke-width="2.6" />
    基金
  </x-tag>
</template>

按需导入 ​

ts
import {
  Icon,
  finiconIconNames,
  finiconIconsMeta,
  registerFiniconIcons,
} from 'x-next';

// Finicon 是可选大图标集，仅在业务确实使用时注册一次。
registerFiniconIcons();

根入口不会再自动注册整套 Finicon，避免只使用 Button 等基础组件时把全部金融 SVG 打进业务包。通用图标和组件内部图标仍保持开箱即用。

来源与授权 ​

Finicon 图标来自 finicon@1.0.12，官方站点是 https://finicon.app/。x-next 保留 finicon: 前缀，便于区分金融图标来源。