❤
npm
Sign UpSign In

@pitrix/qingicon-react
TypeScript icon, indicating that this package has built-in type declarations

2.0.5 • Public • Published

qing-icon

qing-icon 通过将 SVG 渲染成一个 svg symbols sprites 雪碧图的方式进行渲染 Icon。

原理： 将所有的 SVG 文件编译成 SVG Symbols Sprites雪碧图，通过使用 **use** 标签引用 该 Symbols Sprites 的ID。达到渲染的目的。

修改：

  • 老版本中，qingIcon 可以通过单个引入源文件的方式已经废弃
  • 修改老版本中的 type，用 name 替代
  • 使用：只能通过 import Icons from '@QCFE/qingicon-react'; 的方式引入图标
  • 颜色修改只能通过 clasName 去修改 图标的颜色。

脚本

如果新增svg源文件，打包流程

# 1、执行打包，并修改版本号 npm run build:version -- --release-as [版本号]，例如
npm run build:version 1.1.1
# 2、发布
## 如果前期未登录需要先切换到公司内网镜像源，再登录
npm login
## 登录后发布
npm publish

命令介绍：

# 运行qingicon官网项目
yarn dev
# 或者
npm run dev

# 构建qingicon官网
yarn build:website
# 或者
npm run build:website

# 删除编译文件
yarn build:clean
# 或者
npm run build:clean

# 编译 icon
yarn compiler:icons
# 或者
npm run compiler:icons

# 编译 csv 文件并生成json文件
yarn compiler:csv
# 或者
npm run compiler:csv


# 生成html预览文件
yarn compiler:html
# 或者
npm run compiler:html

# 打包
yarn build:source
# 或者
npm run build:source

# 全流程编译
yarn build
# 或者
npm run build

# 获取 figma数据
yarn fetch
# 或者
npm run fetch

# 发布正式版
yarn release
# 或者
npm run release

实现原理

  1. 将所有的svg 编译成一个 .svg 的雪碧图的静态源文件

  2. 通过网络请求将静态资源文件内容注入到页面

    由于通过网络请求来请求该svg文件，所以需要将组件库内部的静态资源拷贝到各自项目内才能使用。通过 fetch 请求将 .svg静态资源插入到dom里面；代码内默认请求地址为 /static/images/q-icon.x.x.x.svg。如果项目中地址无法使用该地址，也可以自定义该静态资源的请求地址，只需要设置： window.q_icon_path = '/static/icons/q-icon.093730173301.svg'，这样即可访问到项目中的文件。

    const { version } = require('../package.json');
export const initSvgDom = (filePath?: string) => {
    if (!window.__init_q_icon_svg__ && !document.getElementById('__SVG_Q_ICON__')) {
        window.__init_q_icon_svg__ = true;
        const url = filePath || window.__q_icon_path__ || `/static/images/qingicon.${version}.svg`;
        fetch(url, { method: 'GET' })
            .then((res) => res.text())
            .then((svg) => {
                if (svg.includes('__SVG_Q_ICON__')) {
                    const dom = document.createElement('div');
                    dom.innerHTML = svg;
                    document.body.appendChild(dom.children[0]);
                } else {
                    window.__init_q_icon_svg__ = false;
                    console.error(new Error('Failed to obtain Icon resource'))
                }
            });
    }
}

  3. 创建了一个Icon渲染器的组件，进行渲染编译后的svg

    引入 Icons 组件，并传入 name 来匹配svg，渲染

    import React from 'react';
import { initSvgDom } from './init';
import { toLowerCase } from './utlis';
require('./styles/index.scss');

initSvgDom();

const idPrefix = 'q-icon';
export type IconProps = React.HTMLAttributes<HTMLSpanElement> & {
name: string;
/** svg 尺寸 */
size?: string | number;
fill?: string | string[];
};
const Icons = (props: IconProps): JSX.Element => {
const { size, name, className, fill, ...extra } = props;
const cls = className ? `${idPrefix} ${className}` : idPrefix;
const width = size || '1em';
const href = name.includes('#') ? name : `#${toLowerCase(name)}`;

    const getStyle = () => {
        if (!fill) return {};
        const color = Array.isArray(fill) ? fill : [fill];
        return {
            color: color[0],
            fill: color[1],
        }
    }

    return (
        <span {...extra} className={cls}>
        <svg className={`qicon-${href.split('#')[1]} qicon-svg`} width={width} height={width} viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg" style={getStyle()}>
          <use xlinkHref={`${href}`} />
        </svg>
    </span>
    )
}

export default Icons;

qingIcon 使用

  1. 把 qingicon 的svg静态资源添加到项目中,具体静态资源路径为 @QCFE/qingicon-react/lib/icons/

    原本是想利用 import.meta.url 进行设置当前远程请求的静态资源地址的，可惜 webpack4 不支持，所以现在改为 将静态资源放在 console 的静态资源下，并在各自子portal 中也添加相印的svg静态资源。

    例如：

    项目中改动

    修改 weback.base.js，或者开发自己去 copy 该源文件到项目中

    const CopyWebpackPlugin = require('copy-webpack-plugin');
const config = {
    plugins: [
        new CopyWebpackPlugin({
            patterns: [
                {
                    from: resolve('node_modules/@QCFE/qingicon-react/lib/icons/'),
                    to: 'static/images',
                },
            ],
        }),
       // 或者
        new CopyPlugin({
            patterns: [
                {
                    context: rootDir,
                    from: 'node_modules/@QCFE/qingicon-react/lib/icons',
                    to: 'static/images',
                },
            ],
        })
    ]
}

  2. 设置 qingicon 的请求路径

    由于 qingicon 内部设置了默认地址: /static/images/qingicon.${version}.svg, 如果项目中把静态资源 qingicon.svg 放入 /static/images/ 下，且文件名不变的情况下，可以不设置该请求路径。否则需要开发者需要手动定义此路径，设置路径：

    window.__q_icon_path__ = 'xxxx'; // 定义qingIcon的svg资源路径

  3. 组件使用

    • 图标引入

      由于改造后，文件不再支持单个图标组件引入，只支持引入 Icon 组件使用，且图只有 name、size、className 以及一些 html 标签属性，控制 svg 属性的只有 name、size。

    import Icons from '@QCFE/qingicon-react';
const demo = () => {
  return (
      <div>
        <Icons name="ResourceOrchestrationDuotone" />
        <Icons name="resource_orchestration_duotone" />
        <Icons name="resource-orchestration-duotone" />
        <!-- #开头主要处理英文和数字相连的情况 eg:ipv4_duotone (name="#ipv4-duotone")  -->
        <Icons name="#resource-orchestration-duotone" />
        <Icons name="resource-orchestration-duotone" fill="red" />
        <Icons name="resource-orchestration-duotone" fill={['red', 'green']} />
        <Icons name="ResourceOrchestrationDuotone" size={100} />
      </div>
  )
}

    • 修改样式

      由于考虑主题定制化， qing-icon 中样式修改只能通过样式修改。

      • 全局控制：.qicon-svg，可以定义 fill 和 color 的颜色修改图标的颜色, 该样式默认 fill: #324558。
      • 局部控制： 通过修改class的颜色，也可以单独传人 fill 去修改icon的颜色

    styles.scss

    // 修改所有的svg图标颜色
.qicon-svg {
  fill: #324558;
   // color:red;
}
// 修改具体某一个svg颜色， 双色的有两个className
:global .qicon-resource-orchestration-duotone {
  fill: #324558;
}
.ResourceOrchestrationDuotone .qicon-svg {
  fill: #324558;
  color: red;
}

    demo.tsx

    import Icons from '@QCFE/qingicon-react';
import styles from './styles.scss'
const demo = () => {
  return (
      <div>
        <Icons name="ResourceOrchestrationDuotone" />
        <Icons name="ResourceOrchestrationDuotone" fill={['red', 'green']} />
        <Icons className={styles['ResourceOrchestrationDuotone']} name="ResourceOrchestrationDuotone" size="100" />
      </div>
  )
}

qingicon官网

用于展示所有的icon以及插画集

  1. 配置host 172.30.0.5 icon.internal.yunify.com
  2. 访问http://icon.internal.yunify.com

icon展示方案

  1. icon基于qingicon项目下的icons来展示的，其原理是根据icons的目录生成对应的json文件，生成脚本为build/build-icons-json.ts
  2. 再在项目里引入根据icons生成的雪碧图（脚本为build/build-icons.ts），使用Icons组件在项目中使用根据步骤1生成的json文件来展示

插画

  1. 目前的插画只支持复制svg到剪切板，所有的插画svg都放在src/constants/illustration.tsx文件中
  2. 其中LargeIllustration，MediumIllustration，SmallIllustration，IconIllustration 分别为大型号，中型号，小型号
  3. 图标型插画列表，如果要新增插画，将对应类型的插画放到这几个列表中即可。

/@pitrix/qingicon-react/

    Package Sidebar

    Install

    npm i @pitrix/qingicon-react

    Weekly Downloads

    66

    Version

    2.0.5

    License

    none

    Unpacked Size

    3.51 MB

    Total Files

    46

    Last publish

    Collaborators

    • ccyu
    • dengww
    • bonjouring
    • geminichr
    • xsyangzhou
    • iisii
    Try on RunKit
    Report malware