add new icons and quasar integration

index.js

@@ -9,6 +9,22 @@ function install(app) {
   app.component(VButton.name, VButton);
   app.component(VInput.name, VInput);
   app.component(VSelect.name, VSelect);
+  console.log(app)
+  app.config.globalProperties.$q.iconMapFn = (iconName) => {
+    // iconName is the content of QIcon "name" prop
+
+    // your custom approach, the following
+    // is just an example:
+    if (iconName.startsWith('app:') === true) {
+      // we strip the "app:" part
+      const name = iconName.substring(4)
+
+      return {
+        cls: 'astra-icons',
+        content: name
+      }
+    }
+  }
 }
 
 export {

package.json

@@ -1,7 +1,7 @@
 {
-  "name": "astra-ui",
+  "name": "dop-astra-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
-  "private": true,
+  "private": false,
   "module": "index.js",
   "scripts": {
     "serve": "vue-cli-service serve",

src/assets/css/iconfonts.css

@@ -1,18 +1,16 @@
 @font-face {
-  font-family: 'icomoon';
+  font-family: 'astra-icons';
-  src:  url('../fonts/icomoon.eot?gy54l');
+  src: url('../fonts/astra-icons.ttf?eo0dfz') format('truetype'),
-  src:  url('../fonts/icomoon.eot?gy54l#iefix') format('embedded-opentype'),
+  url('../fonts/astra-icons.woff?eo0dfz') format('woff'),
-  url('../fonts/icomoon.ttf?gy54l') format('truetype'),
+  url('../fonts/astra-icons.svg?eo0dfz#astra-icons') format('svg');
-  url('../fonts/icomoon.woff?gy54l') format('woff'),
-  url('../fonts/icomoon.svg?gy54l#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
 }
 
-[class^="icon-"]::before, [class*=" icon-"]::before {
+[class^="icon-"], [class*=" icon-"], .astra-icons {
   /* use !important to prevent issues with browser extensions that change fonts */
-  font-family: 'icomoon' !important;
+  font-family: 'astra-icons' !important;
   speak: never;
   font-style: normal;
   font-weight: normal;
@@ -20,163 +18,218 @@
   text-transform: none;
   line-height: 1;
 
+  /* Enable Ligatures ================ */
+  letter-spacing: 0;
+  -webkit-font-feature-settings: "liga";
+  -moz-font-feature-settings: "liga=1";
+  -moz-font-feature-settings: "liga";
+  -ms-font-feature-settings: "liga" 1;
+  font-feature-settings: "liga";
+  -webkit-font-variant-ligatures: discretionary-ligatures;
+  font-variant-ligatures: discretionary-ligatures;
+
   /* Better Font Rendering =========== */
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
-.icon-home:before {
-  content: "\e931";
-  color: #252850;
-}
-.icon-settings:before {
-  content: "\e932";
-  color: #252850;
-}
-.icon-checkbox-off:before {
-  content: "\e900";
-}
 .icon-basket:before {
-  content: "\e901";
+  content: "\e900";
+  color: #252850;
 }
 .icon-bell:before {
-  content: "\e902";
+  content: "\e901";
+  color: #252850;
 }
 .icon-brush:before {
-  content: "\e903";
+  content: "\e902";
+  color: #252850;
 }
 .icon-calendar:before {
-  content: "\e904";
+  content: "\e903";
+  color: #252850;
 }
 .icon-calendar-2:before {
-  content: "\e905";
+  content: "\e904";
+  color: #252850;
 }
 .icon-camera:before {
-  content: "\e906";
+  content: "\e905";
+  color: #252850;
 }
 .icon-camera-reverse:before {
-  content: "\e907";
+  content: "\e906";
+  color: #252850;
 }
 .icon-cancel:before {
-  content: "\e908";
+  content: "\e907";
+  color: #252850;
 }
 .icon-cancel-mini:before {
-  content: "\e909";
+  content: "\e908";
+  color: #252850;
 }
 .icon-change-place:before {
-  content: "\e90a";
+  content: "\e909";
-}
+  color: #252850;
-.icon-checkbox-on:before {
-  content: "\e90b";
 }
 .icon-computer:before {
-  content: "\e90c";
+  content: "\e90a";
+  color: #252850;
 }
 .icon-copy:before {
-  content: "\e90d";
+  content: "\e90b";
+  color: #252850;
 }
 .icon-discord:before {
-  content: "\e90e";
+  content: "\e90c";
+  color: #252850;
+}
+.icon-doc:before {
+  content: "\e90d";
 }
 .icon-doc-ok:before {
-  content: "\e90f";
+  content: "\e90e";
+  color: #252850;
 }
 .icon-dots:before {
-  content: "\e910";
+  content: "\e90f";
+  color: #252850;
 }
 .icon-down-arrow:before {
-  content: "\e911";
+  content: "\e910";
 }
 .icon-download:before {
-  content: "\e912";
+  content: "\e911";
+  color: #252850;
 }
 .icon-edit:before {
+  content: "\e912";
+  color: #252850;
+}
+.icon-error:before {
   content: "\e913";
 }
 .icon-export:before {
   content: "\e914";
+  color: #252850;
 }
 .icon-eye-off:before {
   content: "\e915";
+  color: #252850;
 }
 .icon-eye-on:before {
   content: "\e916";
-}
+  color: #252850;
-.icon-files:before {
-  content: "\e917";
 }
 .icon-filter:before {
-  content: "\e918";
+  content: "\e917";
+  color: #252850;
 }
 .icon-google:before {
-  content: "\e919";
+  content: "\e918";
+  color: #252850;
 }
 .icon-group:before {
+  content: "\e919";
+  color: #252850;
+}
+.icon-home:before {
   content: "\e91a";
+  color: #252850;
 }
 .icon-long-arrow:before {
   content: "\e91b";
+  color: #252850;
 }
 .icon-mail:before {
   content: "\e91c";
+  color: #252850;
 }
-.icon-mirror:before {
+.icon-many-doc:before {
   content: "\e91d";
 }
-.icon-ok:before {
+.icon-mirror:before {
   content: "\e91e";
+  color: #252850;
+}
+.icon-ok:before {
+  content: "\e91f";
+  color: #252850;
 }
 .icon-person:before {
-  content: "\e91f";
+  content: "\e920";
+  color: #252850;
 }
 .icon-person-2:before {
-  content: "\e920";
+  content: "\e921";
+  color: #4772f2;
 }
 .icon-phone:before {
-  content: "\e921";
+  content: "\e922";
+  color: #252850;
 }
 .icon-photo-filter:before {
-  content: "\e922";
+  content: "\e923";
+  color: #252850;
 }
 .icon-plus:before {
-  content: "\e923";
+  content: "\e924";
+  color: #252850;
 }
 .icon-search:before {
-  content: "\e924";
+  content: "\e925";
+  color: #252850;
+}
+.icon-settings:before {
+  content: "\e926";
+  color: #252850;
 }
 .icon-slack:before {
-  content: "\e925";
+  content: "\e927";
+  color: #252850;
 }
 .icon-sort-number:before {
-  content: "\e926";
+  content: "\e928";
+  color: #252850;
 }
 .icon-sort-word:before {
-  content: "\e927";
+  content: "\e929";
+  color: #252850;
 }
 .icon-star-off:before {
-  content: "\e928";
+  content: "\e92a";
+  color: #252850;
 }
 .icon-star-on:before {
-  content: "\e929";
+  content: "\e92b";
+  color: #252850;
 }
 .icon-table:before {
-  content: "\e92a";
+  content: "\e92c";
+  color: #252850;
 }
 .icon-tg:before {
-  content: "\e92b";
+  content: "\e92d";
+  color: #252850;
 }
 .icon-time:before {
-  content: "\e92c";
+  content: "\e92e";
+  color: #252850;
 }
 .icon-turn:before {
-  content: "\e92d";
+  content: "\e92f";
+  color: #252850;
 }
 .icon-up-tag:before {
-  content: "\e92e";
+  content: "\e930";
+  color: #252850;
 }
 .icon-user-data:before {
-  content: "\e92f";
+  content: "\e931";
+  color: #252850;
 }
 .icon-vk:before {
-  content: "\e930";
+  content: "\e932";
+  color: #252850;
 }

src/components/HelloWorld.vue

@@ -14,7 +14,7 @@
     <VInput type="password" />
     <VInput v-model="text">
       <template v-slot:append>
-        <q-icon name="search" color="dark" />
+        <q-icon name="app:bell" color="dark" />
       </template>
     </VInput>
     <VInput>

src/main.js

@@ -1,7 +1,9 @@
 import { createApp } from 'vue'
 import App from './App.vue'
-import { Quasar } from 'quasar'
-import quasarUserOptions from './quasar-user-options'
 import '@/assets/css/iconfonts.css'
 
-createApp(App).use(Quasar, quasarUserOptions).mount('#app')
+import { install } from '../index';
+
+const AstraUI = {install}
+
+createApp(App).use(AstraUI).mount('#app')

src/quasar-user-options.js

@@ -5,7 +5,8 @@ import '@quasar/extras/material-icons/material-icons.css'
 
 // To be used on app.use(Quasar, { ... })
 export default {
-  config: {},
+  config: {
+  },
   plugins: {
   },
   lang: lang