@ brightlocal/ lilustrations (英语)

亮相本地设计系统图示——自定义SVG插图集,人物场景和静态图像.

安装

pnpm add @brightlocal/illustrations

类别

使用量

import { SmallBusiness } from "@brightlocal/illustrations";

function App() {
  return (
    <div>
      {/* Default size: md (130x130) */}
      <SmallBusiness />

      {/* Size scale step, or a custom size */}
      <SmallBusiness size="lg" />
      <SmallBusiness size={400} />

      {/* Responsive with Tailwind */}
      <SmallBusiness className="w-64 h-64" />
    </div>
  );
}

直接进口

您也可以直接从每个类别导入:

import { SmallBusiness } from "@brightlocal/illustrations/illustrations/small-business";
import { GlobeyCalmClosed } from "@brightlocal/illustrations/globey/globey-calm-closed";
import { GlobeyFixingFault } from "@brightlocal/illustrations/globey-scenes/globey-fixing-fault";
import { MapBackgroundDark } from "@brightlocal/illustrations/visuals/map-background-dark";

道具

说明和环球(SVG)

• size - 宽度和高度 说明: "md" (130个) "lg" (300) QQ px/ CSS 值,默认值 "md"。环球:px/CSS值,默认值250
• variant - 地表型变体: "dark" | "white" (略去时自动为白色/暗色)
• className - 补充型式的CSS课程

环球场景和视觉( U)<img>- 基于)

• width - 图像宽度(每个组件的默认值不同)
• height - 图像高度(每个组件的默认不同)
• alt - 替换文本(默认: ""(中文(简体) )
• 标准 <img> HTML 属性

主题支持

所有 SVG 插图根据当前主题使用 Tailwind 自动切换光和暗模式 dark: 变种.

许可证

无效