@ epilot360/ icons (英语)
以 材料符号。 。 。 .
安装
yarn add @epilot360/icons
文档
查看我们 故事书文档。 。 。 .
使用量
这个 @epilot360/icons 软件包在360门户网站中作为外部系统模块被运出.
您可以以名称导入任何图标作为反应组件 :
import { Edit as EditIcon, EpilotIcon } from '@epilot360/icons'
<EditIcon />
// or
<EpilotIcon name="edit" />
360门户网站外的使用
避免捆绑整个 @epilot360/icons 库中,您可以直接导入模块:
import EditIcon from '@epilot360/icons/react/Edit'
;<EditIcon />
使用 SVG
要直接使用作为此套件的一部分运出 svg 文件, 例如: file-loader 您可以从 :
import EditIconSVG from '@epilot360/icons/svg/Edit/icon.svg'
import EditIconSVGFill from '@epilot360/icons/svg/Edit/icon-fill.svg'
;<img src={EditIconSVG} />
使用 svgIcon( )
这个 svgIcon() 函数返回原始 SVG 作为字符串.
import { svgIcon } from '@epilot360/icons';
<div dangerouslySetInnerHTML={{ __html: svgIcon({ name: 'epilot' }) }} />
<pre>
{svgIcon({ name: 'epilot', variant: 'filled', width: 48, height: 48, fill: 'white' })}
</pre>
发展
本地运行故事本 :
yarn storybook
要添加新图标, 请修改 icons.config.yaml 并运行代码脚本.
yarn codegen
你应该立刻看到你的新图标.
释放
在添加新图标后 :
- 弹出两个版本
package.json财务报告和审定财务报表version.json(包括时间戳) - 将您的更改提交到新分支
- 创建合并请求并将其合并到
main - 在MR合并后,标记合并承诺
main数字 :
git checkout main
git pull
git tag v<version>
git push origin v<version>
例如:
git tag v1.17.47
git push origin v1.17.47
添加自定义图标( 非材料)
首先将自定义图标添加到 icons.config.yaml 无 svg_import 属性。 这样可以防止
高于自定义图标模块的代码源 .
然后添加自定义 svg. 见 src/svg/Epilot 举个例子.
本地运行
yarn
yarn start
# bundle served at http://localhost:5600/bundle.js