feat(custom-elements): export ionicons/components

Also provide ionicons as a custom element which can be defined using `customElements.define()`

```
import { IonIcon } from "ionicons/components/ion-icon";
customElements.define("ion-icon", IonIcon);
```

The custom element build works the same as the lazy load build, and is also able to lazy load svgs on demand, either by giving it an exact url in the `src` attribute `<ion-icon src="./path/to/airplane.svg"></ion-icon>`, or by providing the name of the ionicon to load `<ion-icon name="airplane"></ion-icon>`.

If using the `name` attribute, you'll also need to set where to find the svg directory using `setAssetPath()`

```
import { setAssetPath } from "ionicons/components";
setAssetPath(location.href);
```

.gitignore

@@ -10,6 +10,7 @@ log.txt
 .idea/
 .versions/
 .vscode/
+components/
 node_modules/
 tmp/
 dist/

package.json

@@ -6,8 +6,8 @@
     "dist/",
     "icons/"
   ],
-  "module": "dist/index.mjs",
-  "main": "dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.js",
   "types": "dist/types/index.d.ts",
   "unpkg": "dist/ionicons.js",
   "collection": "dist/collection/collection-manifest.json",
@@ -22,17 +22,20 @@
     "release": "np --no-2fa",
     "version": "npm run build"
   },
+  "dependencies": {
+    "@stencil/core": "^2.4.0"
+  },
   "devDependencies": {
-    "@stencil/core": "^1.15.0",
-    "@types/fs-extra": "^9.0.1",
-    "@types/jest": "^26.0.14",
-    "@types/node": "^14.11.5",
+    "@types/fs-extra": "^9.0.6",
+    "@types/jest": "^26.0.20",
+    "@types/node": "^14.14.22",
     "@types/svgo": "^1.3.3",
-    "fs-extra": "9.0.1",
-    "jest": "^26.5.2",
-    "jest-cli": "^26.5.2",
-    "np": "^6.5.0",
-    "svgo": "1.3.2"
+    "fs-extra": "^9.1.0",
+    "jest": "^26.6.3",
+    "jest-cli": "^26.6.3",
+    "np": "^7.2.0",
+    "svgo": "1.3.2",
+    "typescript": "^4.1.3"
   },
   "keywords": [
     "icon pack",
@@ -67,6 +70,5 @@
   "license": "MIT",
   "sideEffects": [
     "icons/imports/"
-  ],
-  "dependencies": {}
+  ]
 }

scripts/build.ts

@@ -1,5 +1,5 @@
 import fs from 'fs-extra';
-import { join, basename } from 'path';
+import { join } from 'path';
 import Svgo from 'svgo';
 
 async function build(rootDir: string) {

scripts/collection-copy.ts

@@ -1,7 +1,6 @@
 import fs from 'fs-extra';
 import { join } from 'path';
 
-
 async function collectionCopy(rootDir: string) {
   // move optimized svgs to correct collection location
   const optimizedSrc = join(rootDir, 'dist', 'ionicons', 'svg');
@@ -11,6 +10,23 @@ async function collectionCopy(rootDir: string) {
   // we don't to copy the src svgs to collection
   await fs.remove(join(rootDir, 'dist', 'collection', 'svg'));
 
+  const cePackageDir = join(rootDir, 'components');
+  const cePackageJsonPath = join(cePackageDir, 'package.json');
+  const ceCjsPath = join(cePackageDir, 'index.cjs.js');
+
+  const emptyCjs = `/*empty cjs*/`;
+  await fs.writeFile(ceCjsPath, emptyCjs);
+
+  const cePackageJson = {
+    name: 'ionicons/components',
+    description: 'Ionicons custom element.',
+    main: './index.cjs.js',
+    module: './index.js',
+    types: './index.d.ts',
+    private: true,
+  };
+  await fs.writeFile(cePackageJsonPath, JSON.stringify(cePackageJson, null, 2));
+
   // this is temporary!!!!
   // removing the `type` from the d.ts export
   // to make it easier for users migrating between
@@ -23,4 +39,4 @@ async function collectionCopy(rootDir: string) {
   await fs.writeFile(typesDist, types);
 }
 
-collectionCopy(join(__dirname, '..'));
+collectionCopy(join(__dirname, '..'));

src/components/icon/icon.tsx

@@ -4,7 +4,7 @@ import { getName, getUrl } from './utils';
 
 @Component({
   tag: 'ion-icon',
-  assetsDir: 'svg',
+  assetsDirs: ['svg'],
   styleUrl: 'icon.css',
   shadow: true,
 })
@@ -29,7 +29,7 @@ export class Icon {
   /**
    * Specifies the label to use for accessibility. Defaults to the icon name.
    */
-  @Prop({ mutable: true, reflectToAttr: true }) ariaLabel?: string;
+  @Prop({ mutable: true, reflect: true }) ariaLabel?: string;
 
   /**
    * Set the icon to hidden, respectively `true`, to remove it from the accessibility tree.

stencil.config.ts

@@ -7,6 +7,10 @@ export const config: Config = {
       type: 'dist',
       empty: false,
     },
+    {
+      type: 'dist-custom-elements',
+      dir: './components',
+    },
     {
       type: 'docs-readme',
     },