冷冻的 UI 图标

使用和设计的图标 呜呼 团队

图像文件

文档

所有图标都可以作为单个的React组件提供. 每个图标都进来了 16, (中文(简体) ), 20, (中文(简体) ), 24 财务报告和审定财务报表 32 px尺寸.

从 npm 安装已冷冻的 UI 图标 :

npm install @frosted-ui/icons

将图标导入您的 React 项目 :

import { Shop16, Shop20 } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <Shop16 />
      <Shop20 />
    </div>
  );
}

图像

除了单色的UI图标外,这个包还发自同源的多彩象形图 图像文件 (图片页). 每个象形图作为一个单反射元件发布,它需要 variant 道具从四个背景颜色调制中选择一个: 'auto' (默认), 'light', (中文(简体) ), 'dark',或 'orange'。 。 。 .

import { ConePictogram, GradCapPictogram } from '@frosted-ui/icons';

function MyComponent() {
  return (
    <div>
      <ConePictogram /> {/* defaults to variant="auto" */}
      <ConePictogram variant="light" />
      <ConePictogram variant="dark" />
      <ConePictogram variant="orange" />
      <GradCapPictogram variant="auto" />
    </div>
  );
}

象形图保存其原始颜色( 无) currentColor 重写,所以他们不接受 color 道具 (英语). 除外 variant,它们接受所有标准SVG道具.

这个 auto 变体

variant="auto" (默认) 发送 CSS light-dark() 不同 light 财务报告和审定财务报表 dark 变相. 浏览器然后根据页面选择正确的颜色 color-scheme ——无回放状态,无媒体查询收听器,无水合不匹配.

在一个 frosted-ui 应用此功能无线: Theme 组件已设定 color-scheme: light | dark 于根上相会. 在任何其他应用中,你需要一个 color-scheme 关于父母的声明(例如:. :root { color-scheme: light dark; })用于浏览器知道要选择哪个手臂.

浏览器支持 light-dark() 是2024年以来的基线(Chrome 123,Safari 17.5,Firefox 120)。 在旧浏览器中 auto 变体回落到没有填充的地步——将变体标出明确的(variant="light"),如果需要支持前2024年浏览器.

变体如何包装

生成器内部通过共享几何和切换每个元件将三个背景变体崩溃成一个元件 fill编号 :stroke 基于颜色 variant对于其相貌变体不具有相同几何特征的稀有象形图,其成分会回落到每个变体的SVG体的内衬上——相同 <NamePictogram variant="…" /> API也一样 对于那些倒回相片, variant="auto" 使 light 身体在光和暗色两种方案.

配置

套装大小

从管状树干上取出名字,所以 import { Shop16 } from '@frosted-ui/icons' 花费一个图标而不是整个集。 每一个读取 import编号 :module 条目 – Webpack, Vite, Rollup, esbuild, Next.js – 默认情况下获得,没有配置.

CommunityJS不能树摇,因此CJS桶将每个导出定义为在第一个访问上加载图标模块的得到器. require('@frosted-ui/icons') 在节点保持便宜, 这对杰斯特,SSR和脚本很重要.

绑在CJS入口上的捆绑工(mainFields: ['main'])是仍然支付整个集的一个案例,因为一个捆绑者解决每一个 require() 静态的不管它何时运行。 深度输入:

import Shop16 from '@frosted-ui/icons/Shop16';
import ConePictogram from '@frosted-ui/icons/pictograms/ConePictogram';

下一个.js

// next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
  modularizeImports: {
    '@frosted-ui/icons': {
      transform: {
        // Pictograms live under `pictograms/` in the built package.
        '*Pictogram': '@frosted-ui/icons/pictograms/{{member}}',
        '*': '@frosted-ui/icons/{{member}}',
      },
      skipDefaultConversion: true,
    },
  },
};

export default nextConfig;

捐款

请跟我们走 提供指南。 。 。 .

承认

被冻结的 UI 图标库设置基于 Radix 图标。 。 。 .