feat(icons): add advanced sql icon (#2147)

libs/components/src/icon/icon.stories.js

@@ -4,6 +4,7 @@ import iconList from '../../../icons/material-codepoints.json';
 const MAT_ICON_LIST = Object.keys(iconList);
 
 const COV_ICON_LIST = [
+  'advanced_sql',
   'alias_arrow',
   'api',
   'api_ondark',

libs/icons/README.md

@@ -0,0 +1,68 @@
+# Covalent icons
+
+## Adding a custom covalent icon
+
+To integrate a new custom Covalent icon, follow these steps::
+
+### Upload the svg icon
+
+1. Begin by uploading the new icon SVG file to the [svgs](https://github.com/Teradata/covalent/tree/main/libs/icons/svgs) folder.
+2. Login to [IcoMoon](https://icomoon.io/) and navigate to the [IcoMoon App](https://icomoon.io/app/#/select).
+3. Unzip the existing `covalent-icons-v<X.X>.zip` file, available [here](https://github.com/Teradata/covalent/tree/main/libs/icons).
+4. Use the "Import Icons" button in the navbar to upload the `selections.json` file from the unzipped `covalent-icons-v<X.X>` folder.
+5. Once the library is loaded on the screen, click on the menu icon (located at the top-right corner) and select "import to set".
+6. Import the SVG file of the new icon.
+7. Click on `Generate font` (located in the footer) and customize the ligature name for the icon in the next page.
+8. Click on `Download` to download the customized font package.
+
+### Update covalent icons
+
+1. Replace the existing Covalent icons zip file (found [here](https://github.com/Teradata/covalent/tree/main/libs/icons)) with the newly generated zip file and ensure to update the version.
+2. Replace the files `covalent-icons.svg`, `covalent-icons.woff`, `covalent-icons.ttf` in [this](https://github.com/Teradata/covalent/tree/main/libs/icons) folder with the files found in the `fonts` folder of the zip file.
+3. Add the icon variable for the custom icon in the `covalent-icons-variables.scss` file. Retrieve the Unicode value from IcoMoon.
+
+```css
+$cov-<icon-name>: unquote('"\\<unicode-value>"');
+```
+
+Example:
+
+```css
+$cov-sample_icon: unquote('"\\e000"');
+```
+
+4. Open the styles.css file in the zip folder. Copy the query parameter from the src URLs of the font files. Replace the existing query parameters in the covalent-icons.scss and covalent-icons.css files with the copied ones. In the below example, `sn0lb0` is the query param.
+
+```css
+@font-face {
+  font-family: 'covalent-icons';
+  src: url('./covalent-icons.ttf?sn0lb0') format('truetype'), url('./covalent-icons.woff?sn0lb0') format('woff'), url('./covalent-icons.svg?sn0lb0#covalent-icons') format('svg');
+  font-weight: normal;
+  font-style: normal;
+  font-display: block;
+}
+```
+
+5. In the covalent-icons.scss and covalent-icons.css files, define the icon variable.
+
+```css
+.cov-sample_icon {
+  &:before {
+    content: $cov-sample_icon;
+  }
+}
+```
+
+### Storybook/Basic usage
+
+To explore the usage of the icon in Storybook:
+
+1. Add the icon name to the `COV_ICON_LIST` in this [file](https://github.com/Teradata/covalent/blob/main/libs/components/src/icon/icon.stories.js)
+
+2. Run storybook
+
+```
+npm run storybook
+```
+
+3. In storybook, navigate to the Icon component and select `Covalent Icons`. Then, choose the newly added icon from the Storybook controls.

libs/icons/covalent-icons-variables.scss

@@ -1,6 +1,7 @@
 $icomoon-font-family: 'covalent-icons' !default;
 $icomoon-font-path: '.' !default;
 
+$cov-advanced_sql: unquote('"\\e96e"');
 $cov-data_management: unquote('"\\e96d"');
 $cov-compute_cluster_group: unquote('"\\e968"');
 $cov-compute_cluster: unquote('"\\e969"');

libs/icons/covalent-icons.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: 'covalent-icons';
-  src: url('./covalent-icons.ttf?ekxpxe') format('truetype'),
-    url('./covalent-icons.woff?ekxpxe') format('woff'),
-    url('./covalent-icons.svg?ekxpxe#covalent-icons') format('svg');
+  src: url('./covalent-icons.ttf?sn0lb0') format('truetype'),
+    url('./covalent-icons.woff?sn0lb0') format('woff'),
+    url('./covalent-icons.svg?sn0lb0#covalent-icons') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -43,6 +43,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cov-advanced_sql:before {
+  content: '\e96e';
+}
 .cov-data_management:before {
   content: '\e96d';
 }

libs/icons/covalent-icons.scss

@@ -2,11 +2,11 @@
 
 @font-face {
   font-family: '#{$icomoon-font-family}';
-  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?ekxpxe')
+  src: url('#{$icomoon-font-path}/#{$icomoon-font-family}.ttf?sn0lb0')
       format('truetype'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?ekxpxe')
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.woff?sn0lb0')
       format('woff'),
-    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?ekxpxe##{$icomoon-font-family}')
+    url('#{$icomoon-font-path}/#{$icomoon-font-family}.svg?sn0lb0##{$icomoon-font-family}')
       format('svg');
   font-weight: normal;
   font-style: normal;
@@ -48,6 +48,11 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.cov-advanced_sql {
+  &:before {
+    content: $cov-advanced_sql;
+  }
+}
 .cov-data_management {
   &:before {
     content: $cov-data_management;