diff --git a/index.js b/index.js index 53b80af..bc48383 100644 --- a/index.js +++ b/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 { diff --git a/package.json b/package.json index 4b36c98..1aca701 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { - "name": "astra-ui", - "version": "0.1.0", - "private": true, + "name": "dop-astra-ui", + "version": "0.1.1", + "private": false, "module": "index.js", "scripts": { "serve": "vue-cli-service serve", diff --git a/src/assets/css/iconfonts.css b/src/assets/css/iconfonts.css index e95ecb2..01a0c15 100644 --- a/src/assets/css/iconfonts.css +++ b/src/assets/css/iconfonts.css @@ -1,18 +1,16 @@ @font-face { - font-family: 'icomoon'; - src: url('../fonts/icomoon.eot?gy54l'); - src: url('../fonts/icomoon.eot?gy54l#iefix') format('embedded-opentype'), - url('../fonts/icomoon.ttf?gy54l') format('truetype'), - url('../fonts/icomoon.woff?gy54l') format('woff'), - url('../fonts/icomoon.svg?gy54l#icomoon') format('svg'); + font-family: 'astra-icons'; + src: url('../fonts/astra-icons.ttf?eo0dfz') format('truetype'), + url('../fonts/astra-icons.woff?eo0dfz') format('woff'), + url('../fonts/astra-icons.svg?eo0dfz#astra-icons') 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"; -} -.icon-checkbox-on:before { - content: "\e90b"; + content: "\e909"; + color: #252850; } .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"; -} -.icon-files:before { - content: "\e917"; + color: #252850; } .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; +} \ No newline at end of file diff --git a/src/assets/fonts/astra-icons.svg b/src/assets/fonts/astra-icons.svg new file mode 100644 index 0000000..fccf5f0 --- /dev/null +++ b/src/assets/fonts/astra-icons.svg @@ -0,0 +1,129 @@ + + + + + + +{ + "fontFamily": "astra-icons", + "majorVersion": 1, + "minorVersion": 0, + "version": "Version 1.0", + "fontId": "astra-icons", + "psName": "astra-icons", + "subFamily": "Regular", + "fullName": "astra-icons", + "description": "Font generated by IcoMoon." +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/assets/fonts/astra-icons.ttf b/src/assets/fonts/astra-icons.ttf new file mode 100644 index 0000000..fda1cfe Binary files /dev/null and b/src/assets/fonts/astra-icons.ttf differ diff --git a/src/assets/fonts/astra-icons.woff b/src/assets/fonts/astra-icons.woff new file mode 100644 index 0000000..090abe9 Binary files /dev/null and b/src/assets/fonts/astra-icons.woff differ diff --git a/src/assets/fonts/icomoon.eot b/src/assets/fonts/icomoon.eot deleted file mode 100644 index 228a3d4..0000000 Binary files a/src/assets/fonts/icomoon.eot and /dev/null differ diff --git a/src/assets/fonts/icomoon.svg b/src/assets/fonts/icomoon.svg deleted file mode 100644 index 78c1141..0000000 --- a/src/assets/fonts/icomoon.svg +++ /dev/null @@ -1,61 +0,0 @@ - - - -Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/fonts/icomoon.ttf b/src/assets/fonts/icomoon.ttf deleted file mode 100644 index 920968c..0000000 Binary files a/src/assets/fonts/icomoon.ttf and /dev/null differ diff --git a/src/assets/fonts/icomoon.woff b/src/assets/fonts/icomoon.woff deleted file mode 100644 index a2af343..0000000 Binary files a/src/assets/fonts/icomoon.woff and /dev/null differ diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index 52315cb..8b85c95 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -14,7 +14,7 @@ diff --git a/src/main.js b/src/main.js index 9ac2201..4dcdb55 100644 --- a/src/main.js +++ b/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') diff --git a/src/quasar-user-options.js b/src/quasar-user-options.js index 432fbdb..28fcc25 100644 --- a/src/quasar-user-options.js +++ b/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