Set up fontawesome icons (v6)

This commit is contained in:
Bubka 2023-09-22 13:10:42 +02:00
parent 5ae9630a82
commit b3b948ad5e
4 changed files with 167 additions and 1 deletions

63
package-lock.json generated
View File

@ -5,6 +5,10 @@
"packages": {
"": {
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@kyvg/vue3-notification": "^3.0.2",
"@vitejs/plugin-vue": "^4.3.4",
"axios": "^1.1.2",
@ -384,6 +388,65 @@
"node": ">=12"
}
},
"node_modules/@fortawesome/fontawesome-common-types": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.4.2.tgz",
"integrity": "sha512-1DgP7f+XQIJbLFCTX1V2QnxVmpLdKdzzo2k8EmvDOePfchaIGQ9eCHj2up3/jNEbZuBqel5OxiaOJf37TWauRA==",
"dev": true,
"hasInstallScript": true,
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/fontawesome-svg-core": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.4.2.tgz",
"integrity": "sha512-gjYDSKv3TrM2sLTOKBc5rH9ckje8Wrwgx1CxAPbN5N3Fm4prfi7NsJVWd1jklp7i5uSCVwhZS5qlhMXqLrpAIg==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-brands-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-brands-svg-icons/-/free-brands-svg-icons-6.4.2.tgz",
"integrity": "sha512-LKOwJX0I7+mR/cvvf6qIiqcERbdnY+24zgpUSouySml+5w8B4BJOx8EhDR/FTKAu06W12fmUIcv6lzPSwYKGGg==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/free-solid-svg-icons": {
"version": "6.4.2",
"resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.4.2.tgz",
"integrity": "sha512-sYwXurXUEQS32fZz9hVCUUv/xu49PEJEyUOsA51l6PU/qVgfbTb2glsTEaJngVVT8VqBATRIdh7XVgV1JF1LkA==",
"dev": true,
"hasInstallScript": true,
"dependencies": {
"@fortawesome/fontawesome-common-types": "6.4.2"
},
"engines": {
"node": ">=6"
}
},
"node_modules/@fortawesome/vue-fontawesome": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/@fortawesome/vue-fontawesome/-/vue-fontawesome-3.0.3.tgz",
"integrity": "sha512-KCPHi9QemVXGMrfuwf3nNnNo129resAIQWut9QTAMXmXqL2ErABC6ohd2yY5Ipq0CLWNbKHk8TMdTXL/Zf3ZhA==",
"dev": true,
"peerDependencies": {
"@fortawesome/fontawesome-svg-core": "~1 || ~6",
"vue": ">= 3.0.0 < 4"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz",

View File

@ -6,6 +6,10 @@
"build": "vite build"
},
"devDependencies": {
"@fortawesome/fontawesome-svg-core": "^6.4.2",
"@fortawesome/free-brands-svg-icons": "^6.4.2",
"@fortawesome/free-solid-svg-icons": "^6.4.2",
"@fortawesome/vue-fontawesome": "^3.0.3",
"@kyvg/vue3-notification": "^3.0.2",
"@vitejs/plugin-vue": "^4.3.4",
"axios": "^1.1.2",

View File

@ -3,10 +3,10 @@ import '/resources/js_vue3/assets/app.scss';
import { createApp } from 'vue'
import { i18nVue } from 'laravel-vue-i18n'
// import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
import Notifications from '@kyvg/vue3-notification'
import FontAwesomeIcon from './icons'
const app = createApp(App)
@ -29,4 +29,6 @@ app.use(i18nVue, {
})
app.use(Notifications)
app.component('font-awesome-icon', FontAwesomeIcon)
app.mount('#app')

97
resources/js_vue3/icons.js vendored Normal file
View File

@ -0,0 +1,97 @@
// import Vue from 'vue'
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
import {
faPlus,
faPlusCircle,
faQrcode,
faImage,
faTrash,
faCheck,
faCheckSquare,
faTimes,
faLock,
faLockOpen,
faSearch,
faEllipsisH,
faBars,
faSpinner,
faCaretDown,
faLayerGroup,
faMinusCircle,
faExclamationCircle,
faPenSquare,
faTh,
faList,
faTimesCircle,
faUpload,
faGlobe,
faBook,
faFlask,
faCode,
faCopy,
faSortAlphaDown,
faSortAlphaUp,
faEye,
faEyeSlash,
faExternalLinkAlt,
faCamera,
faFileDownload,
faSun,
faMoon,
faDesktop,
faCircleNotch
} from '@fortawesome/free-solid-svg-icons'
import {
faGithubAlt
} from '@fortawesome/free-brands-svg-icons'
library.add(
faPlus,
faPlusCircle,
faQrcode,
faImage,
faTrash,
faCheck,
faCheckSquare,
faTimes,
faLock,
faLockOpen,
faSearch,
faEllipsisH,
faBars,
faSpinner,
faGithubAlt,
faCaretDown,
faLayerGroup,
faMinusCircle,
faExclamationCircle,
faPenSquare,
faTh,
faList,
faTimesCircle,
faUpload,
faGlobe,
faBook,
faFlask,
faCode,
faCopy,
faSortAlphaDown,
faSortAlphaUp,
faEye,
faEyeSlash,
faExternalLinkAlt,
faCamera,
faFileDownload,
faSun,
faMoon,
faDesktop,
faCircleNotch
);
export default FontAwesomeIcon
// Vue.component('font-awesome-icon', FontAwesomeIcon)