feat(icon): add auro-icon versioning tag name

package.json

@@ -141,7 +141,7 @@
     "web components"
   ],
   "scripts": {
-    "build": "npm-run-all build:sass sass:render types",
+    "build": "npm-run-all build:version build:sass sass:render build:api build:docs types bundler",
     "build:test": "npm-run-all test linters",
     "build:release": "npm-run-all build build:test build:api build:docs bundler postinstall",
     "build:ci": "npm-run-all sweep build:release",
@@ -150,13 +150,14 @@
     "build:docs": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/generateDocs.mjs",
     "build:sass": "npm-run-all build:sass:component postCss:component sass:render",
     "build:sass:component": "sass --no-source-map src:src",
+    "build:version": "node scripts/version.mjs",
     "build:watch": "nodemon -e scss,js,html --watch src --watch apiExamples/**/* --exec npm run build:dev:assets",
     "bundler": "rollup -c",
     "bundler:test": "rollup -c -w",
     "scssLint": "stylelint \"./src/**/*.scss\"",
     "dev": "concurrently --kill-others \"npm run build:watch\" \"npm run serve\"",
     "dist:js": "copyfiles -u 1 -V './src/**/*.js' ./dist",
-    "esLint": "./node_modules/.bin/eslint src/**/*.js",
+    "esLint": "./node_modules/.bin/eslint src/**/*.js --ignore-pattern 'src/**/*Version.js'",
     "linters": "npm-run-all scssLint esLint",
     "preCommit": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/pre-commit.mjs",
     "postCss:component": "node ./node_modules/@aurodesignsystem/auro-library/scripts/build/postCss.mjs",

scripts/version.mjs

@@ -0,0 +1,3 @@
+import versionWriter from '@aurodesignsystem/auro-library/scripts/build/versionWriter.js';
+
+versionWriter.writeDepVersionFile('@aurodesignsystem/auro-icon');

src/auro-avatar.js

@@ -3,9 +3,16 @@
 
 // ---------------------------------------------------------------------
 
+/* eslint-disable lit/binding-positions, lit/no-invalid-html */
+
 // If use litElement base class
-import { LitElement, html } from "lit";
-import '@aurodesignsystem/auro-icon';
+import { LitElement } from "lit";
+import { html } from 'lit/static-html.js';
+
+import { AuroDependencyVersioning } from '@aurodesignsystem/auro-library/scripts/runtime/dependencyTagVersioning.mjs';
+
+import { AuroIcon } from '@aurodesignsystem/auro-icon/src/auro-icon.js';
+import iconVersion from './iconVersion';
 
 import styleCss from "./style-css.js";
 import tokensCss from "./tokens-css.js";
@@ -29,6 +36,13 @@ export class AuroAvatar extends LitElement {
 
     this.alt = ``;
     this.ariaVisible = null;
+
+    const versioning = new AuroDependencyVersioning();
+
+    /**
+     * @private
+     */
+    this.iconTag = versioning.generateTag('auro-icon', iconVersion, AuroIcon);
   }
 
   // function to define props used within the scope of this component
@@ -155,7 +169,7 @@ export class AuroAvatar extends LitElement {
     if (this.tail) {
       return html`
         <div>
-          <auro-icon customSize category="logos" name="tail-${this.tail}"></auro-icon>
+          <${this.iconTag} customSize category="logos" name="tail-${this.tail}"></${this.iconTag}>
         </div>
         <slot name="display" class="tailTitle"></slot>
       `;

src/iconVersion.js

@@ -0,0 +1 @@
+export default '4.5.0'

src/style.scss

@@ -64,7 +64,7 @@ img {
     background: linear-gradient(180deg, var(--ds-auro-avatar-tail-container-gradient-color-one) 0%, var(--ds-auro-avatar-tail-container-gradient-color-two) 100%);
   }
 
-  auro-icon {
+  [auro-icon] {
     position: absolute;
     top: -1%;
     left: -25%;

test/auro-avatar.test.js

@@ -77,7 +77,7 @@ describe('auro-avatar', () => {
     `);
 
     const root = el.shadowRoot;
-    const icon = root.querySelector('auro-icon').getAttribute('name');
+    const icon = root.querySelector('[auro-icon]').getAttribute('name');
 
     await expect(icon).to.equal("tail-JL");
   });