0.2.12 • Published 3 years ago
mqq-reader-icons v0.2.12
MQQ-READER-ICONS
使用
基于 CSS 变量,组件具体可根据业务需要进行封装
<i
class="mqq-icon normal"
style="--i-image: var(--i-add); --i-size: 40px; --i-color: #545454"
></i>
.mqq-icon {
width: var(--i-size);
height: var(--i-size);
}
/* tint icon */
.mqq-icon.normal {
background-color: var(--i-color, #000);
-webkit-mask-image: var(--i-image);
-webkit-mask-position: center center;
-webkit-mask-repeat: no-repeat;
-webkit-mask-size: 100%;
}
/* 多色 icon */
.mqq-icon.ext {
background: center / var(--i-size) no-repeat var(--i-image);
}
icon 是怎么生成的?
- 通过
fetch
先把 figma 的 icon components 抓取下来保存为 svg 或 png 等。 - 通过
convert
对 👆 抓取下来的 icon assets 进行转换(通常针对业务中对 icon 的使用方法来决定转换的格式)。- 将 svg 的图片通过 SVGO 进行压缩处理,并以 Data URLs 的形式作为 CSS 变量保存在
icons.css
中。 - 将 png 的以 Base64 Data URLs 的形式作为 CSS 变量保存在
icons.css
中。
- 将 svg 的图片通过 SVGO 进行压缩处理,并以 Data URLs 的形式作为 CSS 变量保存在
- 业务方可以通过
npm scripts
等方法对 npm 包进行更新,同时将./node_modules/mqq-reader-icons/dist
下的内容进行处理。如:DIR_PATH=./node_modules/mqq-reader-icons/dist cp ${DIR_PATH}/icons.css ./style/icons.css
生成文件
├── compressed
│ └── svg // 压缩后的 svg 文件
├── png // 从 figma 导出的 png 文件
└── svg // 从 figma 导出的 svg 文件
└── icons.css // icon CSS 变量
└── data.json // 所有 icon 名称的JSON
figma 配置 & 发布 & 更新
- 可参考 webnovel-icons 或 leadream/figma-icon-automation README 文档
- Github token:联系 Gwokhov 获取
Base on:
0.2.12
3 years ago
0.2.11
3 years ago
0.2.10
3 years ago
0.2.7
3 years ago
0.2.9
3 years ago
0.2.8
3 years ago
0.2.0
3 years ago
0.2.6
3 years ago
0.2.3
3 years ago
0.2.2
3 years ago
0.2.5
3 years ago
0.2.4
3 years ago
0.1.4
3 years ago
0.1.1
3 years ago
0.1.0
3 years ago
0.0.3
3 years ago
0.0.2
3 years ago
0.0.1
4 years ago
0.0.8
4 years ago
0.0.5
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.4
4 years ago