AXA 材料
材料以SVG格式提供常用的图标和图像. 此外,材料还会输出颜色,帮助者,打字和布局等风格.
使用量
重要内容: 如果此组件需要在 Internet Explorer 11 中运行, 你需要用我们的多填充器。 。 。 .
npm install @axa-ch/materials
import { unsafeHTML } from 'lit/directives/unsafe-html.js';
import { Arrow_forwardSvg } from '@axa-ch/materials/icons/material-design';
<span>${unsafeHTML(Arrow_forwardSvg)}</span>;
反应
import ArrowForwardSvg from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';
<ArrowForwardSvg />;
用打字符反应
import { ReactComponent as ArrowForwardSvg } from '@axa-ch/materials/icons-raw/material-design/arrow-forward.svg';
<ArrowForwardSvg />;
需要用吗 SVGR 将外部 SVG 文件转换成带有 Webpack 的 React 组件。 使用时自动安装 create-pod-app。 。 。 .
如果您需要手动安装:
npm install @svgr/webpack --save-dev
{
test: /\.svg$/,
use: ['@svgr/webpack'],
}
样式 - Scs 混合和可变
颜色
@import '@axa-ch/materials/styles/00-colors.scss';
body {
background-color: $color-axa-blue;
}
动画
@import '@axa-ch/materials/styles/20-animations.scss';
断点
@import '@axa-ch/materials/styles/variables.scss';
body {
// Rules for devices bigger than portrait mobile
@media (min-width: $breakpoint-xs) {
margin: 8px;
}
}
类型
@import '@axa-ch/materials/styles/typography.scss';
body {
font-family: $font-family-primary;
}
变量
@import '@axa-ch/materials/styles/variables.scss';
body {
margin: $spacing-1;
}
.box {
box-shadow: $box-shadow-1;
}
图标/图像集
大小
请注意: icons 财务报告和审定财务报表 images 这里请使用这些维度.
SVGs 组合
(完成列表可见) 这里(中文(简体) )
| 图标 |
|---|
| 添加Svg |
| 向左箭头Svg |
| 右向箭头Svg |
| 附加文件Svg |
| 取消Svg |
| 关卡Svg |
| 检查循环Svg |
| 清除Svg |
| 向上加载Svg |
| 折叠Svg |
| 日期输入Svg |
| 删除ForeverSvg |
| 文档Svg |
| 下载Svg |
| 电子邮件Svg |
| 扩展Svg |
| 脸书Svg |
| 信息Svg |
| InstagramSvg 图像 |
| 键Svg |
| 链接inSvg |
| 移动Svg |
| 信件Svg |
| 个人Svg |
| 电话Vg |
| 电源Svg |
| 搜索Svg |
| 微信公众号 |
| 上传Svg |
| 兴 Svg |
| (原始内容存档于2019-09-31) (英语). YoutubeSvg |
| 图像 |
|---|
| AxaLogoSvg 维基月球 |
| AxaLogo 打开Svg |
| ...还有更多的子文件夹 |
捐款
添加新图像的过程
- 除非设计师已经掌握了文件 否则就让设计师参与其中 他将对其进行审查,并可能改变一些事情,例如通过调整内垫等,以保证整体质量.
- 删除 SVG 内部不必要的代码 :
- (单位:千美元).
data-name="Layer 2"# 矢量绘图软件的层信息 - (b) 减少或减少员额.
<path fill="#fff" d="M0 0h96v96H0z"/># 装满白色背景的外框
- (单位:千美元).
-
- a. 使用内部 斯维戈 - 引用脚本
npm run build-images从材料文件夹本身来清理和优化SVG,然后从中复制优化的文件.tmp文件夹到images-raw - b. 或者使用 在线 SVG 优化器 用于同一目的
- a. 使用内部 斯维戈 - 引用脚本
- 手动审查最后一个步骤生成的 SVG : 添加或编辑<路径>属性, 设置
fill="currentColor"和(或)strokes="currentColor"视情况而定。 删除不必要的属性 . - 运行
npm run build以生成每个 svg 文件的 js 文件。 生成的文件可见于images文件夹.
更新材料(仅联合国IX)
"相干"部分中我们所有的图标都是取自google(而别无其他)的材料图标. 从google更新材料图标(https://github.com/google/材料-设计-相机/放行),遵循这些步骤.
- 删除其中的内容
icons-raw文件夹. - 将最新版本的材料图标作为 ZIP 文件下载到您的下载文件夹 .
- 提取材料图标 zip 文件到下载文件夹中 .
- 将提取的文件夹重命名为
material-design-icons。 。 。 . - 打开终端
cd输入材质根文件夹(src/components/00-materials/) (中文(简体) ). - 运行
sh material-importer.sh。 。 。 . - 只运行文件夹的搜索
src/components/00-materials/icons-raw并查找<path(结尾为白空间). - 将所有事件替换为
<path fill="currentColor"(结尾为白空间). - 只运行文件夹的搜索
src/components/00-materials/icons-raw并查找<circle(结尾为白空间). - 将所有事件替换为
<circle fill="currentColor"(结尾为白空间).
结束了。 这似乎是目前进口商脚本中最快和最有效的办法.