Skip to main content

图标

LynKit Icons 是一个现代化的图标库，提供了丰富的图标集合，可用于 React 应用中。这些图标采用 SVG 格式，支持自定义大小、颜色等属性。

特点​

  • 高质量矢量图标 - 基于 SVG，清晰度不受缩放影响
  • 样式可定制 - 支持自定义颜色、大小等属性
  • 轻量级 - 支持按需加载，减小应用体积
  • 响应式 - 适配不同屏幕尺寸
  • 易于使用 - 简单的 API 和丰富的文档
  • TypeScript 支持 - 提供完整的类型定义

图标分类​

基础图标​

方向图标​

导航图标​

媒体图标​

状态图标​

社交图标​

文件类型图标​

安装​

npm install @lynkit/icons

使用示例​

基本用法​

import { IconHome, IconSearch, IconUser } from '@lynkit/icons';

function App() {
  return (
    <div>
      <IconHome /> Home
      <IconSearch /> Search
      <IconUser /> User
    </div>
  );
}

自定义大小和颜色​

import { IconNotification } from '@lynkit/icons';

function NotificationBadge() {
  return (
    <div>
      <IconNotification size={24} color="#f5222d" />
      <IconNotification size="2em" color="royalblue" />
      <IconNotification style={{ fontSize: 36, color: 'green' }} />
    </div>
  );
}

响应式图标​

import { IconMenu } from '@lynkit/icons';

function ResponsiveMenu() {
  return (
    <div>
      <IconMenu 
        className="menu-icon"
        style={{
          fontSize: 'clamp(24px, 5vw, 40px)',
          color: 'currentColor'
        }}
      />
    </div>
  );
}

动画图标​

import { IconLoading } from '@lynkit/icons';

function LoadingIndicator() {
  return (
    <div>
      <IconLoading 
        className="rotate-animation"
        color="#1890ff"
        size={32}
      />
      
      <style jsx>{`
        .rotate-animation {
          animation: rotate 1.5s linear infinite;
        }
        @keyframes rotate {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }
      `}</style>
    </div>
  );
}

图标属性​

所有图标组件都接受以下属性：

属性类型默认值描述
sizenumber | string'1em'图标大小
colorstring'currentColor'图标颜色
classNamestring-自定义类名
styleCSSProperties-自定义样式
onClickfunction-点击事件处理函数

按需加载​

为了减小打包体积，建议使用按需加载的方式：

// 只导入需要的图标
import { IconHome } from '@lynkit/icons/IconHome';
import { IconSearch } from '@lynkit/icons/IconSearch';

或者使用 babel-plugin-import 自动实现按需加载：

// .babelrc
{
  "plugins": [
    ["import", {
      "libraryName": "@lynkit/icons",
      "libraryDirectory": "",
      "camel2DashComponentName": false
    }]
  ]
}

自定义图标​

LynKit Icons 也提供了创建自定义图标的工具：

import { createIcon } from '@lynkit/icons/create';

const CustomIcon = createIcon({
  path: 'M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z', // SVG path
  viewBox: '0 0 24 24'
});

function App() {
  return <CustomIcon size={24} color="tomato" />;
}

浏览器兼容性​

LynKit Icons 支持所有现代浏览器。在 IE11 中使用需要添加 SVG polyfill。