Add Ember demo using web component

2024-12-04 18:23:17 +00:00 · 2022-05-13 21:29:57 +03:00 · 2022-05-13 21:29:57 +03:00 · a2591dbe36
commit a2591dbe36
parent fdd716846a
39 changed files with 44687 additions and 3 deletions
--- a/README.md
+++ b/README.md
@ -55,7 +55,7 @@ Main packages:

 Directory `component` contains Iconify icon components and SVG framework.

-| Icon component                           | Usage  |
+| Package                                  | Usage  |
 | ---------------------------------------- | ------ |
 | [SVG Framework](./components/iconify/)   | HTML   |
 | [React component](./components/react/)   | React  |
@ -83,11 +83,15 @@ Directory `components-demo` contains demo packages that show usage of icon compo

 Directory `iconify-icon` contains `iconify-icon` web component and wrappers for various frameworks.

-   [IconifyIcon web component](./iconify-icon/icon/) - `iconify-icon` web component.
+| Package                               | Usage      |
+| ------------------------------------- | ---------- |
+| [Web component](./iconify-icon/icon/) | Everywhere |

 #### Demo

-Directory `iconify-icon-demo` will contain demo packages that show usage of `iconify-icon` web component.
+Directory `iconify-icon-demo` contains demo packages that show usage of `iconify-icon` web component.
+
+-   [Ember demo](./iconify-icon-demo/ember-icon-demo/) - demo using web component with Ember. Run `npm run build` to build demo and `npm run start` to start it.

 ## Installation

--- a/iconify-icon-demo/ember-icon-demo/.editorconfig
+++ b/iconify-icon-demo/ember-icon-demo/.editorconfig
@ -0,0 +1,19 @@
+# EditorConfig helps developers define and maintain consistent
+# coding styles between different editors and IDEs
+# editorconfig.org
+
+root = true
+
+[*]
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+indent_style = space
+indent_size = 2
+
+[*.hbs]
+insert_final_newline = false
+
+[*.{diff,md}]
+trim_trailing_whitespace = false
--- a/iconify-icon-demo/ember-icon-demo/.ember-cli
+++ b/iconify-icon-demo/ember-icon-demo/.ember-cli
@ -0,0 +1,15 @@
+{
+  /**
+    Ember CLI sends analytics information by default. The data is completely
+    anonymous, but there are times when you might want to disable this behavior.
+
+    Setting `disableAnalytics` to true will prevent any data from being sent.
+  */
+  "disableAnalytics": false,
+
+  /**
+  Setting `isTypeScriptProject` to true will force the blueprint generators to generate TypeScript
+  rather than JavaScript by default, when a TypeScript version of a given blueprint is available.
+  */
+  "isTypeScriptProject": false
+}
--- a/iconify-icon-demo/ember-icon-demo/.eslintignore
+++ b/iconify-icon-demo/ember-icon-demo/.eslintignore
@ -0,0 +1,25 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
--- a/iconify-icon-demo/ember-icon-demo/.eslintrc.js
+++ b/iconify-icon-demo/ember-icon-demo/.eslintrc.js
@ -0,0 +1,58 @@
+'use strict';
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      legacyDecorators: true,
+    },
+  },
+  plugins: ['ember'],
+  extends: [
+    'eslint:recommended',
+    'plugin:ember/recommended',
+    'plugin:prettier/recommended',
+  ],
+  env: {
+    browser: true,
+  },
+  rules: {},
+  overrides: [
+    // node files
+    {
+      files: [
+        './.eslintrc.js',
+        './.prettierrc.js',
+        './.template-lintrc.js',
+        './ember-cli-build.js',
+        './testem.js',
+        './blueprints/*/index.js',
+        './config/**/*.js',
+        './lib/*/index.js',
+        './server/**/*.js',
+      ],
+      parserOptions: {
+        sourceType: 'script',
+      },
+      env: {
+        browser: false,
+        node: true,
+      },
+      plugins: ['node'],
+      extends: ['plugin:node/recommended'],
+      rules: {
+        // this can be removed once the following is fixed
+        // https://github.com/mysticatea/eslint-plugin-node/issues/77
+        'node/no-unpublished-require': 'off',
+      },
+    },
+    {
+      // test files
+      files: ['tests/**/*-test.{js,ts}'],
+      extends: ['plugin:qunit/recommended'],
+    },
+  ],
+};
--- a/iconify-icon-demo/ember-icon-demo/.gitignore
+++ b/iconify-icon-demo/ember-icon-demo/.gitignore
@ -0,0 +1,32 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/.env*
+/.pnp*
+/.sass-cache
+/.eslintcache
+/connect.lock
+/coverage/
+/libpeerconnection.log
+/npm-debug.log*
+/testem.log
+/yarn-error.log
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
+
+# broccoli-debug
+/DEBUG/
--- a/iconify-icon-demo/ember-icon-demo/.prettierignore
+++ b/iconify-icon-demo/ember-icon-demo/.prettierignore
@ -0,0 +1,25 @@
+# unconventional js
+/blueprints/*/files/
+/vendor/
+
+# compiled output
+/dist/
+/tmp/
+
+# dependencies
+/bower_components/
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.eslintcache
+.lint-todo/
+
+# ember-try
+/.node_modules.ember-try/
+/bower.json.ember-try
+/npm-shrinkwrap.json.ember-try
+/package.json.ember-try
+/package-lock.json.ember-try
+/yarn.lock.ember-try
--- a/iconify-icon-demo/ember-icon-demo/.prettierrc.js
+++ b/iconify-icon-demo/ember-icon-demo/.prettierrc.js
@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  singleQuote: true,
+};
--- a/iconify-icon-demo/ember-icon-demo/.template-lintrc.js
+++ b/iconify-icon-demo/ember-icon-demo/.template-lintrc.js
@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+  extends: 'recommended',
+};
--- a/iconify-icon-demo/ember-icon-demo/.watchmanconfig
+++ b/iconify-icon-demo/ember-icon-demo/.watchmanconfig
@ -0,0 +1,3 @@
+{
+  "ignore_dirs": ["tmp", "dist"]
+}
--- a/iconify-icon-demo/ember-icon-demo/README.md
+++ b/iconify-icon-demo/ember-icon-demo/README.md
@ -0,0 +1,56 @@
+# ember-icon-demo
+
+This README outlines the details of collaborating on this Ember application.
+A short introduction of this app could easily go here.
+
+## Prerequisites
+
+You will need the following things properly installed on your computer.
+
+* [Git](https://git-scm.com/)
+* [Node.js](https://nodejs.org/) (with npm)
+* [Ember CLI](https://cli.emberjs.com/release/)
+* [Google Chrome](https://google.com/chrome/)
+
+## Installation
+
+* `git clone <repository-url>` this repository
+* `cd ember-icon-demo`
+* `npm install`
+
+## Running / Development
+
+* `ember serve`
+* Visit your app at [http://localhost:4200](http://localhost:4200).
+* Visit your tests at [http://localhost:4200/tests](http://localhost:4200/tests).
+
+### Code Generators
+
+Make use of the many generators for code, try `ember help generate` for more details
+
+### Running Tests
+
+* `ember test`
+* `ember test --server`
+
+### Linting
+
+* `npm run lint`
+* `npm run lint:fix`
+
+### Building
+
+* `ember build` (development)
+* `ember build --environment production` (production)
+
+### Deploying
+
+Specify what it takes to deploy your app.
+
+## Further Reading / Useful Links
+
+* [ember.js](https://emberjs.com/)
+* [ember-cli](https://cli.emberjs.com/release/)
+* Development Browser Extensions
+  * [ember inspector for chrome](https://chrome.google.com/webstore/detail/ember-inspector/bmdblncegkenkacieihfhpjfppoconhi)
+  * [ember inspector for firefox](https://addons.mozilla.org/en-US/firefox/addon/ember-inspector/)
--- a/iconify-icon-demo/ember-icon-demo/app/app.js
+++ b/iconify-icon-demo/ember-icon-demo/app/app.js
@ -0,0 +1,12 @@
+import Application from '@ember/application';
+import Resolver from 'ember-resolver';
+import loadInitializers from 'ember-load-initializers';
+import config from 'ember-icon-demo/config/environment';
+
+export default class App extends Application {
+  modulePrefix = config.modulePrefix;
+  podModulePrefix = config.podModulePrefix;
+  Resolver = Resolver;
+}
+
+loadInitializers(App, config.modulePrefix);
--- a/iconify-icon-demo/ember-icon-demo/app/components/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/app/components/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/app/components/color-demo.hbs
+++ b/iconify-icon-demo/ember-icon-demo/app/components/color-demo.hbs
@ -0,0 +1,20 @@
+<section class='color-demo'>
+  <h1>Color and style (components/color-demo.hbs)</h1>
+  <div>
+    Icon with style (red):
+    <iconify-icon
+      icon='dashicons:admin-users'
+      style='color: red'
+      inline
+    ></iconify-icon>
+  </div>
+  <div>
+    Icon size (2em):
+    <iconify-icon
+      icon='dashicons:admin-users'
+      height='2em'
+      style='color: purple'
+      inline
+    ></iconify-icon>
+  </div>
+</section>
--- a/iconify-icon-demo/ember-icon-demo/app/components/iconify-demo.hbs
+++ b/iconify-icon-demo/ember-icon-demo/app/components/iconify-demo.hbs
@ -0,0 +1,55 @@
+<div>
+  <section class='icon-24'>
+    <h1>Usage</h1>
+    <div>
+      Icon referenced by name:
+      <iconify-icon icon='mdi:home'></iconify-icon>
+    </div>
+    <div>
+      Icon referenced by serialised object:
+      <iconify-icon icon={{this.iconData}}></iconify-icon>
+    </div>
+    <div class='alert'>
+      <iconify-icon icon='mdi-light:alert'></iconify-icon>
+      Important notice with alert icon!
+    </div>
+  </section>
+
+  <section class='inline-demo'>
+    <h1>Inline demo</h1>
+    <div>
+      Block icon (behaving like image):
+      <iconify-icon icon='demo-test'></iconify-icon>
+    </div>
+    <div>
+      Inline icon (behaving line text / icon font):
+      <iconify-icon icon='demo-test' inline></iconify-icon>
+    </div>
+  </section>
+
+  <section class='render-demo icon-24'>
+    <h1>Render modes</h1>
+    <div>
+      Default render mode:
+      <iconify-icon icon='line-md:discord' inline></iconify-icon>
+    </div>
+    <div>
+      SVG:
+      <iconify-icon icon='line-md:discord' mode='svg' inline></iconify-icon>
+    </div>
+    <div>
+      Background or mask (detects based on presence of `currentColor`):
+      <iconify-icon icon='line-md:discord' mode='style' inline></iconify-icon>
+    </div>
+    <div>
+      Background (cannot use `currentColor`):
+      <iconify-icon icon='line-md:discord' mode='bg' inline></iconify-icon>
+    </div>
+    <div>
+      Mask:
+      <iconify-icon icon='line-md:discord' mode='mask' inline></iconify-icon>
+    </div>
+  </section>
+
+  <ColorDemo />
+</div>
--- a/iconify-icon-demo/ember-icon-demo/app/components/iconify-demo.js
+++ b/iconify-icon-demo/ember-icon-demo/app/components/iconify-demo.js
@ -0,0 +1,36 @@
+import Component from '@glimmer/component';
+import { disableCache, addIcon, addCollection } from 'iconify-icon';
+import presentationPlay from '@iconify-icons/mdi-light/presentation-play';
+import playIcon from '@iconify-icons/mdi-light/play';
+
+// Disable cache to make sure icons are loaded from API
+disableCache('all');
+
+// Add 'mdi-light:play' as 'demo-play'
+addIcon('demo-play', playIcon);
+
+addIcon('demo-test', {
+  width: 16,
+  height: 16,
+  body: '<g fill="none" stroke-linecap="round" stroke-width="1" stroke="currentColor"><circle cx="8" cy="8" r="7.5" stroke-dasharray="48" stroke-dashoffset="48"><animate id="circle" attributeName="stroke-dashoffset" values="48;0" dur="0.5s" fill="freeze" /></circle><path d="M8 5v3" stroke-width="2" stroke-dasharray="5" stroke-dashoffset="5"><animate attributeName="stroke-dashoffset" values="5;0" dur="0.3s" begin="circle.end+0.1s" fill="freeze" /></path></g><circle cx="8" cy="11" r="1" fill="currentColor" opacity="0"><animate attributeName="opacity" values="0;1" dur="0.2s" begin="circle.end+0.5s" fill="freeze" /></circle>',
+});
+
+// Add few mdi-light: icons
+
+addCollection({
+  prefix: '',
+  icons: {
+    alert1: {
+      body: '<path d="M10.5 14c4.142 0 7.5 1.567 7.5 3.5V20H3v-2.5c0-1.933 3.358-3.5 7.5-3.5zm6.5 3.5c0-1.38-2.91-2.5-6.5-2.5S4 16.12 4 17.5V19h13v-1.5zM10.5 5a3.5 3.5 0 1 1 0 7a3.5 3.5 0 0 1 0-7zm0 1a2.5 2.5 0 1 0 0 5a2.5 2.5 0 0 0 0-5zM20 16v-1h1v1h-1zm0-3V7h1v6h-1z" fill="currentColor"/>',
+    },
+    link1: {
+      body: '<path d="M8 13v-1h7v1H8zm7.5-6a5.5 5.5 0 1 1 0 11H13v-1h2.5a4.5 4.5 0 1 0 0-9H13V7h2.5zm-8 11a5.5 5.5 0 1 1 0-11H10v1H7.5a4.5 4.5 0 1 0 0 9H10v1H7.5z" fill="currentColor"/>',
+    },
+  },
+  width: 24,
+  height: 24,
+});
+
+export default class IconDemoComponent extends Component {
+  iconData = JSON.stringify(presentationPlay);
+}
--- a/iconify-icon-demo/ember-icon-demo/app/controllers/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/app/controllers/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/app/helpers/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/app/helpers/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/app/index.html
+++ b/iconify-icon-demo/ember-icon-demo/app/index.html
@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>EmberIconDemo</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link integrity="" rel="stylesheet" href="{{rootURL}}assets/ember-icon-demo.css">
+
+    {{content-for "head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/ember-icon-demo.js"></script>
+
+    {{content-for "body-footer"}}
+  </body>
+</html>
--- a/iconify-icon-demo/ember-icon-demo/app/models/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/app/models/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/app/router.js
+++ b/iconify-icon-demo/ember-icon-demo/app/router.js
@ -0,0 +1,9 @@
+import EmberRouter from '@ember/routing/router';
+import config from 'ember-icon-demo/config/environment';
+
+export default class Router extends EmberRouter {
+  location = config.locationType;
+  rootURL = config.rootURL;
+}
+
+Router.map(function () {});
--- a/iconify-icon-demo/ember-icon-demo/app/routes/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/app/routes/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/app/styles/app.css
+++ b/iconify-icon-demo/ember-icon-demo/app/styles/app.css
@ -0,0 +1,166 @@
+body {
+  font-family: Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: left;
+  color: #2c3e50;
+  font-size: 16px;
+  line-height: 1.5;
+}
+
+/* Sections */
+section {
+  border-bottom: 1px dotted #ccc;
+  padding: 16px;
+}
+section:last-child {
+  border-bottom-width: 0;
+}
+section:after {
+  content: ' ';
+  display: table;
+  clear: both;
+}
+h1,
+h2 {
+  margin: 0 0 16px;
+  padding: 0;
+  font-size: 24px;
+  font-weight: normal;
+}
+h2 {
+  margin: 16px 0;
+  font-size: 20px;
+}
+h1 + h2 {
+  margin-top: -8px;
+}
+p {
+  margin: 12px 0 4px;
+  padding: 0;
+}
+
+/* Tests */
+.test-row {
+  font-size: 16px;
+  line-height: 1.5;
+}
+.test-row-icons {
+  padding-right: 4px;
+}
+.test-row-icons > iconify-icon {
+  color: #afafaf;
+  display: none;
+}
+.test-row-icons > iconify-icon.visible {
+  display: inline-block;
+}
+.test-row-icons > iconify-icon.success {
+  color: #327335;
+}
+.test-row-icons > iconify-icon.failed {
+  color: #ba3329;
+}
+
+/* 24px icon */
+.icon-24 iconify-icon {
+  font-size: 24px;
+  line-height: 1;
+  vertical-align: -0.25em;
+}
+
+/* Alert demo */
+.alert {
+  position: relative;
+  margin: 8px;
+  padding: 16px;
+  padding-left: 48px;
+  background: #ba3329;
+  color: #fff;
+  border-radius: 5px;
+  float: left;
+}
+
+.alert + div {
+  clear: both;
+}
+
+.alert iconify-icon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  font-size: 24px;
+  line-height: 1em;
+  margin: -0.5em 0 0;
+}
+
+/* Checkbox component */
+.checkbox-container {
+  margin: 8px 0;
+}
+
+.checkbox {
+  cursor: pointer;
+  /* color: #1769aa; */
+  color: #626262;
+  text-decoration: none;
+}
+.checkbox:hover {
+  color: #ba3329;
+  text-decoration: underline;
+}
+
+.checkbox iconify-icon {
+  margin-right: 4px;
+  color: #afafaf;
+  font-size: 24px;
+  line-height: 1em;
+  vertical-align: -0.25em;
+}
+.checkbox--checked iconify-icon {
+  color: #327335;
+}
+.checkbox:hover iconify-icon {
+  color: inherit;
+}
+
+.checkbox-container small {
+  margin-left: 4px;
+  opacity: 0.7;
+}
+
+/* Inline demo */
+.inline-demo iconify-icon {
+  color: #06a;
+  margin: 0 8px;
+  position: relative;
+  z-index: 2;
+  background: #fff;
+}
+.inline-demo div {
+  position: relative;
+  font-size: 16px;
+  line-height: 1.5;
+}
+.inline-demo div:before,
+.inline-demo div:after {
+  content: '';
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 0;
+  border-top: 1px dashed #506874;
+  opacity: 0.5;
+  z-index: -1;
+}
+.inline-demo div:before {
+  bottom: 5px;
+}
+.inline-demo div:after {
+  bottom: 7px;
+  border-top-color: #ba3329;
+}
+
+.render-demo iconify-icon {
+  color: #06a;
+}
--- a/iconify-icon-demo/ember-icon-demo/app/templates/application.hbs
+++ b/iconify-icon-demo/ember-icon-demo/app/templates/application.hbs
@ -0,0 +1,5 @@
+{{page-title 'Ember Demo'}}
+
+<IconifyDemo />
+
+{{outlet}}
--- a/iconify-icon-demo/ember-icon-demo/config/ember-cli-update.json
+++ b/iconify-icon-demo/ember-icon-demo/config/ember-cli-update.json
@ -0,0 +1,20 @@
+{
+  "schemaVersion": "1.0.0",
+  "packages": [
+    {
+      "name": "ember-cli",
+      "version": "4.3.0",
+      "blueprints": [
+        {
+          "name": "app",
+          "outputRepo": "https://github.com/ember-cli/ember-new-output",
+          "codemodsSource": "ember-app-codemods-manifest@1",
+          "isBaseBlueprint": true,
+          "options": [
+            "--ci-provider=github"
+          ]
+        }
+      ]
+    }
+  ]
+}
--- a/iconify-icon-demo/ember-icon-demo/config/environment.js
+++ b/iconify-icon-demo/ember-icon-demo/config/environment.js
@ -0,0 +1,51 @@
+'use strict';
+
+module.exports = function (environment) {
+  let ENV = {
+    modulePrefix: 'ember-icon-demo',
+    environment,
+    rootURL: '/',
+    locationType: 'history',
+    EmberENV: {
+      FEATURES: {
+        // Here you can enable experimental features on an ember canary build
+        // e.g. EMBER_NATIVE_DECORATOR_SUPPORT: true
+      },
+      EXTEND_PROTOTYPES: {
+        // Prevent Ember Data from overriding Date.parse.
+        Date: false,
+      },
+    },
+
+    APP: {
+      // Here you can pass flags/options to your application instance
+      // when it is created
+    },
+  };
+
+  if (environment === 'development') {
+    // ENV.APP.LOG_RESOLVER = true;
+    // ENV.APP.LOG_ACTIVE_GENERATION = true;
+    // ENV.APP.LOG_TRANSITIONS = true;
+    // ENV.APP.LOG_TRANSITIONS_INTERNAL = true;
+    // ENV.APP.LOG_VIEW_LOOKUPS = true;
+  }
+
+  if (environment === 'test') {
+    // Testem prefers this...
+    ENV.locationType = 'none';
+
+    // keep test console output quieter
+    ENV.APP.LOG_ACTIVE_GENERATION = false;
+    ENV.APP.LOG_VIEW_LOOKUPS = false;
+
+    ENV.APP.rootElement = '#ember-testing';
+    ENV.APP.autoboot = false;
+  }
+
+  if (environment === 'production') {
+    // here you can enable a production-specific feature
+  }
+
+  return ENV;
+};
--- a/iconify-icon-demo/ember-icon-demo/config/optional-features.json
+++ b/iconify-icon-demo/ember-icon-demo/config/optional-features.json
@ -0,0 +1,6 @@
+{
+  "application-template-wrapper": false,
+  "default-async-observers": true,
+  "jquery-integration": false,
+  "template-only-glimmer-components": true
+}
--- a/iconify-icon-demo/ember-icon-demo/config/targets.js
+++ b/iconify-icon-demo/ember-icon-demo/config/targets.js
@ -0,0 +1,11 @@
+'use strict';
+
+const browsers = [
+  'last 1 Chrome versions',
+  'last 1 Firefox versions',
+  'last 1 Safari versions',
+];
+
+module.exports = {
+  browsers,
+};
--- a/iconify-icon-demo/ember-icon-demo/ember-cli-build.js
+++ b/iconify-icon-demo/ember-icon-demo/ember-cli-build.js
@ -0,0 +1,24 @@
+'use strict';
+
+const EmberApp = require('ember-cli/lib/broccoli/ember-app');
+
+module.exports = function (defaults) {
+  let app = new EmberApp(defaults, {
+    // Add options here
+  });
+
+  // Use `app.import` to add additional libraries to the generated
+  // output files.
+  //
+  // If you need to use different assets in different
+  // environments, specify an object as the first parameter. That
+  // object's keys should be the environment name and the values
+  // should be the asset to use in that environment.
+  //
+  // If the library that you are including contains AMD or ES6
+  // modules that you would like to import into your application
+  // please specify an object with the list of modules as keys
+  // along with the exports of each module as its value.
+
+  return app.toTree();
+};
--- a/iconify-icon-demo/ember-icon-demo/package-lock.json
+++ b/iconify-icon-demo/ember-icon-demo/package-lock.json
--- a/iconify-icon-demo/ember-icon-demo/package.json
+++ b/iconify-icon-demo/ember-icon-demo/package.json
@ -0,0 +1,72 @@
+{
+  "name": "ember-icon-demo",
+  "version": "0.0.0",
+  "private": true,
+  "description": "Small description for ember-icon-demo goes here",
+  "repository": "",
+  "license": "MIT",
+  "author": "",
+  "directories": {
+    "doc": "doc",
+    "test": "tests"
+  },
+  "scripts": {
+    "build": "ember build --environment=production",
+    "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"",
+    "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix",
+    "lint:hbs": "ember-template-lint .",
+    "lint:hbs:fix": "ember-template-lint . --fix",
+    "lint:js": "eslint . --cache",
+    "lint:js:fix": "eslint . --fix",
+    "start": "ember serve",
+    "test": "npm-run-all lint test:*",
+    "test:ember": "ember test"
+  },
+  "devDependencies": {
+    "@ember/optional-features": "^2.0.0",
+    "@ember/test-helpers": "^2.6.0",
+    "@glimmer/component": "^1.0.4",
+    "@glimmer/tracking": "^1.0.4",
+    "@iconify-icons/mdi-light": "^1.2.1",
+    "babel-eslint": "^10.1.0",
+    "broccoli-asset-rev": "^3.0.0",
+    "ember-auto-import": "^2.4.1",
+    "ember-cli": "~4.3.0",
+    "ember-cli-app-version": "^5.0.0",
+    "ember-cli-babel": "^7.26.11",
+    "ember-cli-dependency-checker": "^3.2.0",
+    "ember-cli-htmlbars": "^6.0.1",
+    "ember-cli-inject-live-reload": "^2.1.0",
+    "ember-cli-sri": "^2.1.1",
+    "ember-cli-terser": "^4.0.2",
+    "ember-data": "~4.3.0",
+    "ember-export-application-global": "^2.0.1",
+    "ember-fetch": "^8.1.1",
+    "ember-load-initializers": "^2.1.2",
+    "ember-page-title": "^7.0.0",
+    "ember-qunit": "^5.1.5",
+    "ember-resolver": "^8.0.3",
+    "ember-source": "~4.3.0",
+    "ember-template-lint": "^4.3.0",
+    "ember-welcome-page": "^6.2.0",
+    "eslint": "^7.32.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-ember": "^10.5.9",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-qunit": "^7.2.0",
+    "iconify-icon": "^0.0.4",
+    "loader.js": "^4.7.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.6.1",
+    "qunit": "^2.18.0",
+    "qunit-dom": "^2.0.0",
+    "webpack": "^5.70.0"
+  },
+  "engines": {
+    "node": "12.* || 14.* || >= 16"
+  },
+  "ember": {
+    "edition": "octane"
+  }
+}
--- a/iconify-icon-demo/ember-icon-demo/public/robots.txt
+++ b/iconify-icon-demo/ember-icon-demo/public/robots.txt
@ -0,0 +1,3 @@
+# http://www.robotstxt.org
+User-agent: *
+Disallow:
--- a/iconify-icon-demo/ember-icon-demo/testem.js
+++ b/iconify-icon-demo/ember-icon-demo/testem.js
@ -0,0 +1,23 @@
+'use strict';
+
+module.exports = {
+  test_page: 'tests/index.html?hidepassed',
+  disable_watching: true,
+  launch_in_ci: ['Chrome'],
+  launch_in_dev: ['Chrome'],
+  browser_start_timeout: 120,
+  browser_args: {
+    Chrome: {
+      ci: [
+        // --no-sandbox is needed when running Chrome inside a container
+        process.env.CI ? '--no-sandbox' : null,
+        '--headless',
+        '--disable-dev-shm-usage',
+        '--disable-software-rasterizer',
+        '--mute-audio',
+        '--remote-debugging-port=0',
+        '--window-size=1440,900',
+      ].filter(Boolean),
+    },
+  },
+};
--- a/iconify-icon-demo/ember-icon-demo/tests/helpers/index.js
+++ b/iconify-icon-demo/ember-icon-demo/tests/helpers/index.js
@ -0,0 +1,42 @@
+import {
+  setupApplicationTest as upstreamSetupApplicationTest,
+  setupRenderingTest as upstreamSetupRenderingTest,
+  setupTest as upstreamSetupTest,
+} from 'ember-qunit';
+
+// This file exists to provide wrappers around ember-qunit's / ember-mocha's
+// test setup functions. This way, you can easily extend the setup that is
+// needed per test type.
+
+function setupApplicationTest(hooks, options) {
+  upstreamSetupApplicationTest(hooks, options);
+
+  // Additional setup for application tests can be done here.
+  //
+  // For example, if you need an authenticated session for each
+  // application test, you could do:
+  //
+  // hooks.beforeEach(async function () {
+  //   await authenticateSession(); // ember-simple-auth
+  // });
+  //
+  // This is also a good place to call test setup functions coming
+  // from other addons:
+  //
+  // setupIntl(hooks); // ember-intl
+  // setupMirage(hooks); // ember-cli-mirage
+}
+
+function setupRenderingTest(hooks, options) {
+  upstreamSetupRenderingTest(hooks, options);
+
+  // Additional setup for rendering tests can be done here.
+}
+
+function setupTest(hooks, options) {
+  upstreamSetupTest(hooks, options);
+
+  // Additional setup for unit tests can be done here.
+}
+
+export { setupApplicationTest, setupRenderingTest, setupTest };
--- a/iconify-icon-demo/ember-icon-demo/tests/index.html
+++ b/iconify-icon-demo/ember-icon-demo/tests/index.html
@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>EmberIconDemo Tests</title>
+    <meta name="description" content="">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    {{content-for "head"}}
+    {{content-for "test-head"}}
+
+    <link rel="stylesheet" href="{{rootURL}}assets/vendor.css">
+    <link rel="stylesheet" href="{{rootURL}}assets/ember-icon-demo.css">
+    <link rel="stylesheet" href="{{rootURL}}assets/test-support.css">
+
+    {{content-for "head-footer"}}
+    {{content-for "test-head-footer"}}
+  </head>
+  <body>
+    {{content-for "body"}}
+    {{content-for "test-body"}}
+
+    <div id="qunit"></div>
+    <div id="qunit-fixture">
+      <div id="ember-testing-container">
+        <div id="ember-testing"></div>
+      </div>
+    </div>
+
+    <script src="/testem.js" integrity="" data-embroider-ignore></script>
+    <script src="{{rootURL}}assets/vendor.js"></script>
+    <script src="{{rootURL}}assets/test-support.js"></script>
+    <script src="{{rootURL}}assets/ember-icon-demo.js"></script>
+    <script src="{{rootURL}}assets/tests.js"></script>
+
+    {{content-for "body-footer"}}
+    {{content-for "test-body-footer"}}
+  </body>
+</html>
--- a/iconify-icon-demo/ember-icon-demo/tests/integration/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/tests/integration/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/tests/test-helper.js
+++ b/iconify-icon-demo/ember-icon-demo/tests/test-helper.js
@ -0,0 +1,12 @@
+import Application from 'ember-icon-demo/app';
+import config from 'ember-icon-demo/config/environment';
+import * as QUnit from 'qunit';
+import { setApplication } from '@ember/test-helpers';
+import { setup } from 'qunit-dom';
+import { start } from 'ember-qunit';
+
+setApplication(Application.create(config.APP));
+
+setup(QUnit.assert);
+
+start();
--- a/iconify-icon-demo/ember-icon-demo/tests/unit/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/tests/unit/.gitkeep
--- a/iconify-icon-demo/ember-icon-demo/vendor/.gitkeep
+++ b/iconify-icon-demo/ember-icon-demo/vendor/.gitkeep