feat: add vaadin-iconset to vaadin-icons (#2059)

Author: web-padawan

packages/vaadin-app-layout/package.json

@@ -36,7 +36,6 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-icons": "^21.0.0-alpha2",
     "@vaadin/vaadin-tabs": "^21.0.0-alpha2",
     "sinon": "^9.2.1"
   },

packages/vaadin-confirm-dialog/package.json

@@ -38,7 +38,6 @@
   "devDependencies": {
     "@esm-bundle/chai": "^4.1.5",
     "@vaadin/testing-helpers": "^0.2.1",
-    "@vaadin/vaadin-icons": "^21.0.0-alpha2",
     "sinon": "^9.2.1"
   },
   "publishConfig": {

packages/vaadin-icons/gulpfile.js

@@ -6,33 +6,41 @@ const modify = require('gulp-modify');
 const cheerio = require('cheerio');
 const concat = require('gulp-concat');
 
-gulp.task('icons', function () {
+function createCopyright() {
+  return `/**
+ * @license
+ * Copyright (c) 2015 - ${new Date().getFullYear()} Vaadin Ltd.
+ * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
+ */`;
+}
+
+function iconFileModifier(prefix) {
+  return function (file, contents) {
+    const id = file.path.replace(/.*\/(.*).svg/, '$1');
+    const svg = cheerio.load(contents, { xmlMode: true })('svg');
+    // Remove fill attributes.
+    svg.children('[fill]').removeAttr('fill');
+    // Add closing tags instead of self-closing.
+    const content = svg.children().toString().replace(/"\/>/g, '"></path>');
+    // Output the "meat" of the SVG as group element.
+    return `<g id="${prefix}${id}">${content}</g>`;
+  };
+}
+
+gulp.task('iron-icons', function () {
   return gulp
     .src(['assets/svg/*.svg'], { base: '.' })
     .pipe(
       modify({
-        fileModifier: function (file, contents) {
-          const id = file.path.replace(/.*\/(.*).svg/, '$1');
-          const svg = cheerio.load(contents, { xmlMode: true })('svg');
-          // Remove fill attributes.
-          svg.children('[fill]').removeAttr('fill');
-          // Add closing tags instead of self-closing.
-          const content = svg.children().toString().replace(/"\/>/g, '"></path>');
-          // Output the "meat" of the SVG as group element.
-          return `<g id="${id}">${content}</g>`;
-        }
+        fileModifier: iconFileModifier('')
       })
     )
     .pipe(concat('iconset.js'))
     .pipe(
       modify({
         fileModifier: function (file, contents) {
           // Enclose all icons in an iron-iconset-svg
-          return `/**
- * @license
- * Copyright (c) 2015 - 2021 Vaadin Ltd.
- * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
- */
+          return `${createCopyright()}
 import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
 
 const $_documentContainer = document.createElement('template');
@@ -47,3 +55,35 @@ document.head.appendChild($_documentContainer.content);\n`;
     )
     .pipe(gulp.dest('.'));
 });
+
+gulp.task('vaadin-icons', function () {
+  return gulp
+    .src(['assets/svg/*.svg'], { base: '.' })
+    .pipe(
+      modify({
+        fileModifier: iconFileModifier('vaadin:')
+      })
+    )
+    .pipe(concat('vaadin-iconset.js'))
+    .pipe(
+      modify({
+        fileModifier: function (file, contents) {
+          // Enclose all icons in a vaadin-iconset
+          return `${createCopyright()}
+import '@vaadin/vaadin-icon/vaadin-iconset.js';
+import '@vaadin/vaadin-icon/vaadin-icon.js';
+
+const $_documentContainer = document.createElement('template');
+
+$_documentContainer.innerHTML = \`<vaadin-iconset name="vaadin" size="16">
+<svg><defs>\n${contents}\n</defs></svg>
+</vaadin-iconset>\`;
+
+document.head.appendChild($_documentContainer.content);\n`;
+        }
+      })
+    )
+    .pipe(gulp.dest('.'));
+});
+
+gulp.task('icons', gulp.parallel('iron-icons', 'vaadin-icons'));

packages/vaadin-icons/package.json

@@ -28,7 +28,8 @@
   "dependencies": {
     "@polymer/iron-icon": "^3.0.0",
     "@polymer/iron-iconset-svg": "^3.0.0",
-    "@polymer/polymer": "^3.0.0"
+    "@polymer/polymer": "^3.0.0",
+    "@vaadin/vaadin-icon": "^21.0.0-alpha2"
   },
   "devDependencies": {
     "cheerio": "^1.0.0-rc.6",

packages/vaadin-icons/test/visual/screenshots/baseline/vaadin-iconset.png

@@ -0,0 +1,24 @@
+import { fixtureSync, nextFrame } from '@vaadin/testing-helpers';
+import { visualDiff } from '@web/test-runner-visual-regression';
+import '../../vaadin-iconset.js';
+
+describe('vaadin-iconset', () => {
+  let wrapper;
+
+  before(async () => {
+    const { origin, pathname } = new URL(import.meta.url);
+    const file = pathname.replace(/test\/.+/, 'assets/vaadin-font-icons.json');
+    const data = await fetch(`${origin}${file}`);
+    const icons = await data.json();
+    wrapper = fixtureSync(`
+      <div style="display: flex; flex-wrap: wrap;">
+        ${icons.map(({ name }) => `<vaadin-icon icon="vaadin:${name}" style="margin: 3px"></vaadin-icon>`).join('\n')}
+      </div>
+    `);
+    await nextFrame();
+  });
+
+  it('basic', async () => {
+    await visualDiff(wrapper, `${import.meta.url}_vaadin-iconset`);
+  });
+});