@clayui/css/README.md

Liferay's web implementation of the Lexicon Design Language

## Jump to Section

- [About](#about)
- [Adding New SVG Icons](#adding-new-svg-icons)

## About

Clay is Liferay's web implementation of the Lexicon Design Language. It is built with HTML, CSS, and Javascript with [Bootstrap](https://getbootstrap.com/docs/4.1/getting-started/introduction/) as a foundation.

You can view the various components on [the Clay site](http://clayui.com).

## Adding New SVG Icons

1) The copyright license should be added at the top of the new SVG icon file using the format:

```
<!--
* 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
-->
```

See https://liferay.dev/blogs/-/blogs/how-and-why-to-properly-write-copyright-statements-in-your-code#tldr for more details.

2) The `<svg></svg>` element should only have the attributes `xmlns` and `viewBox`.

3) Remove any `fill` and `id` attributes from the SVG elements, unless it is a language flag. Language flags should have the `fill` attribute.

4) Remove any `<style></style>` tags and the classes / ids that are referenced by it.

5) The class `lexicon-icon-body` is deprecated and is no longer being included in newer icons. This class allowed the background color of an icon to be modified using the property `fill`. We shouldn't use this class.

6) The class `lexicon-icon-outline` is a marker on each SVG element (e.g., `path`, `circle`, `rect`). It provides another class to use as a selector to apply CSS changes to an icon. This class should be included on all SVG elements.

7) Run `yarn compile` and include the auto generated file `src/scss/functions/_lx-icons-generated.scss` in your commit.

8) In the file, `clay/clayui.com/plugins/gatsby-plugin-clay-css-tasks/clay-icon-aliases.js`, find `iconsData` and add the icon aliases if needed.

9) In the `clayui.com` directory run `yarn develop` and check to see if the icon shows up in the icon section.

10) Include the files `static/images/icons/icons.svg`, `static/js/icons-autogenerated.json`, and `static/js/flags-autogenerated.json` to the commit. Some of these files might not show up in git's "Changes not staged for commit:" if aliases or flags have not been added.