@clayui/css

跳转到区域

• 关于
• 添加新 SVG 图标

关于

Clay是Liferay的网络执行Lexicon设计语言. 它用 HTML 、 CSS 和 Javascript 构建 诱饵 作为基金会.

您可以在 克莱网站。 。 。 .

添加新 SVG 图标

1. 使用该格式在新 SVG 图标文件上方添加版权许可 :

<!--
* SPDX-FileCopyrightText: © 2022 Liferay, Inc. <https://liferay.com>
* SPDX-FileCopyrightText: © 2022 Contributors to the project Clay <https://github.com/liferay/clay/graphs/contributors>
*
* SPDX-License-Identifier: BSD-3-Clause
-->

见 https://liferay.dev/blogs/-/blogs/how-和-why-to-properly-write-copy-right-statements-in-your-code#tldr 更多细节.

2. 这个 <svg></svg> 元素只应具有属性 xmlns 财务报告和审定财务报表 viewBox。 。 。 .

3. 删除任何 fill 财务报告和审定财务报表 id 来自 SVG 元素的属性,除非它是语言旗帜。 语言旗应该有 fill 属性.

4. 删除任何 <style></style> 标记及其引用的类 / id .

5. 班级 lexicon-icon-body 已贬值,不再包含在较新的图标中。 此类允许使用属性修改图标的背景颜色 fill我们不应该使用这个课.

6. 班级 lexicon-icon-outline 是每个SVG元素上的标记(例如, path, (中文(简体) ), circle, (中文(简体) ), rect) (中文(简体) ). 它提供另一个类作为选择器用于将 CSS 更改应用到图标上. 这一类应包含在SVG的所有元素上.

7. 运行 yarn compile 并包含自动生成的文件 src/scss/functions/_lx-icons-generated.scss 在你的承诺.

8. 在档案中, clay/clayui.com/plugins/gatsby-plugin-clay-css-tasks/clay-icon-aliases.js,查找 iconsData 并在需要时添加图标别名.

9. 在那个 clayui.com 目录运行 yarn develop 并检查图标是否出现在图标部分.

10. 包含文件 static/images/icons/icons.svg, (中文(简体) ), static/js/icons-autogenerated.json,以及 static/js/flags-autogenerated.json 承诺。 其中一些文件可能不会出现在git的"不为犯罪而上演的变革:",如果没有添加别名或旗帜.