npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wii/icons

v6.7.0

Published

本库为图标库,基于 antd-icons 的文旅图标扩展

Downloads

3

Readme

快速开始

本库为图标库,基于 antd-icons 的文旅图标扩展

使用方式

安装依赖包

# npm 源:https://wii-npm.pkg.coding.net/wii-fe/waunpm/
npm install @wii/icons --save

Webpack 配置 Resolve.alias

// webpack5 暂时不支持 chainWebpack
chainWebpack(config) {
  const libName = '@ant-design/icons';
  config.resolve.alias
    .delete(libName)
    .set(
      `${libName}/lib/components`,
      path.join(
        __dirname, // 项目根目录
        'node_modules',
        `${libName}/lib/components`,
      ),
    )
    .set(
      `${libName}/es/components`,
      path.join(
        __dirname,
        'node_modules',
        `${libName}/es/components`,
      ),
    )
    .set(libName, path.join(__dirname, 'node_modules', '@wii/icons'));
}

// OR
const webpackConfig = {
  ...,
  resolve: {
    alias: {
      '@ant-design/icons/lib/components': path.join(
        __dirname,
        'node_modules',
        '@ant-design/icons/lib/components'
      ),
      '@ant-design/icons/es/components': path.join(
        __dirname,
        'node_modules',
        '@ant-design/icons/es/components'
      ),
      // 这里的顺序很重要 ~ 可能出现问题
      '@ant-design/icons': path.join(
        __dirname,
        'node_modules',
        '@wii/icons'
      )
    }
  }
};

代码引入

import { StarOutlined, StarFilled, StarTwoTone } from '@wii/icons';

<StarOutlined />;

API

通用图标

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------ | ------------------------------------------ | --------------------- | ------ | ---- | | className | 设置图标的样式名 | string | - | | | rotate | 图标旋转角度(IE9 无效) | number | - | | | spin | 是否有旋转动画 | boolean | false | | | style | 设置图标的样式,例如 fontSizecolor | CSSProperties | - | | | twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | |

其中我们提供了三种主题的图标,不同主题的 Icon 组件名为图标名加主题做为后缀。

import { StarOutlined, StarFilled, StarTwoTone } from '@wii/icons';

<StarOutlined />
<StarFilled />
<StarTwoTone twoToneColor="#eb2f96" />

自定义 Icon

| 参数 | 说明 | 类型 | 默认值 | 版本 | | --------- | -------------------------------------------------------------- | ------------------------------------------ | ------ | ---- | | component | 控制如何渲染图标,通常是一个渲染根标签为 <svg> 的 React 组件 | ComponentType<CustomIconComponentProps> | - | | | rotate | 图标旋转角度(IE9 无效) | number | - | | | spin | 是否有旋转动画 | boolean | false | | | style | 设置图标的样式,例如 fontSizecolor | CSSProperties | - | |

关于 SVG 图标

SVG 图标替换了原先的 font 图标,从而带来了以下优势:

  • 完全离线化使用,不需要从 CDN 下载字体文件,图标不会因为网络问题呈现方块,也无需字体文件本地部署。
  • 在低端设备上 SVG 有更好的清晰度。
  • 支持多色图标。
  • 对于内建图标的更换可以提供更多 API,而不需要进行样式覆盖。

更多讨论可参考:#10353

所有的图标都会以 <svg> 标签渲染,可以使用 styleclassName 设置图标的大小和单色图标的颜色。例如:

import { MessageOutlined } from '@wii/icons';

<MessageOutlined style={{ fontSize: '16px', color: '#08c' }} />;

双色图标主色

对于双色图标,可以通过使用 getTwoToneColor()setTwoToneColor(colorString) 来全局设置图标主色。

import { getTwoToneColor, setTwoToneColor } from '@wii/icons';

setTwoToneColor('#eb2f96');
getTwoToneColor(); // #eb2f96

自定义 font 图标

提供了一个 createFromIconfontCN 方法,方便开发者调用在 iconfont.cn 上自行管理的图标。

import { createFromIconfontCN } from '@wii/icons';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js', // 在 iconfont.cn 上生成
});

ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);

其本质上是创建了一个使用 <use> 标签来渲染图标的组件。

options 的配置项如下:

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ---------------- | --------------------------------------------------------------------------------------------------------- | ----------------------- | ------ | ---- | | extraCommonProps | 给所有的 svg 图标 <Icon /> 组件设置额外的属性 | { [key: string]: any } | {} | | | scriptUrl | iconfont.cn 项目在线生成的 js 地址,@wii/[email protected] 之后支持 string[] 类型 | string | string[] | - | |

scriptUrl 都设置有效的情况下,组件在渲染前会自动引入 iconfont.cn 项目中的图标符号集,无需手动引入。

iconfont.cn 使用帮助 查看如何生成 js 地址。

自定义 SVG 图标

如果使用 webpack,可以通过配置 @svgr/webpack 来将 svg 图标作为 React 组件导入。@svgr/webpackoptions 选项请参阅 svgr 文档

// webpack.config.js
{
  test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
  use: [
    {
      loader: 'babel-loader',
    },
    {
      loader: '@svgr/webpack',
      options: {
        babel: false,
        icon: true,
      },
    },
  ],
}
import Icon from '@wii/icons';
import MessageSvg from 'path/to/message.svg'; // path to your '*.svg' file.
// in create-react-app:
// import { ReactComponent as MessageSvg } from 'path/to/message.svg';

ReactDOM.render(<Icon component={MessageSvg} />, mountNode);

Icon 中的 component 组件的接受的属性如下:

| 字段 | 说明 | 类型 | 只读值 | 版本 | | --------- | ----------------------- | ---------------- | -------------- | ---- | | className | 计算后的 svg 类名 | string | - | | | fill | svg 元素填充的颜色 | string | currentColor | | | height | svg 元素高度 | string | number | 1em | | | style | 计算后的 svg 元素样式 | CSSProperties | - | | | width | svg 元素宽度 | string | number | 1em | |

问题反馈

问题反馈