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
-
将所有的svg 编译成一个
.svg的雪碧图的静态源文件 -
通过网络请求将静态资源文件内容注入到页面
由于通过网络请求来请求该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')) } }); } }
-
创建了一个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 的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', }, ], }) ] }
-
设置 qingicon 的请求路径
由于 qingicon 内部设置了默认地址:
/static/images/qingicon.${version}.svg, 如果项目中把静态资源 qingicon.svg 放入 /static/images/ 下，且文件名不变的情况下，可以不设置该请求路径。否则需要开发者需要手动定义此路径，设置路径：window.__q_icon_path__ = 'xxxx'; // 定义qingIcon的svg资源路径
-
组件使用
-
图标引入
由于改造后，文件不再支持单个图标组件引入，只支持引入 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" /> <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> ) }
-
用于展示所有的icon以及插画集
- 配置host 172.30.0.5 icon.internal.yunify.com
- 访问http://icon.internal.yunify.com
- icon基于qingicon项目下的icons来展示的，其原理是根据icons的目录生成对应的json文件，生成脚本为build/build-icons-json.ts
- 再在项目里引入根据icons生成的雪碧图（脚本为build/build-icons.ts），使用Icons组件在项目中使用根据步骤1生成的json文件来展示
- 目前的插画只支持复制svg到剪切板，所有的插画svg都放在src/constants/illustration.tsx文件中
- 其中LargeIllustration，MediumIllustration，SmallIllustration，IconIllustration 分别为大型号，中型号，小型号
- 图标型插画列表，如果要新增插画，将对应类型的插画放到这几个列表中即可。