Adding fortawesome

Author: webdevnerdstuff

package.json

@@ -65,6 +65,10 @@
 	"devDependencies": {
 		"@babel/core": "^7.21.3",
 		"@babel/eslint-parser": "^7.21.3",
+		"@fortawesome/fontawesome-svg-core": "^6.3.0",
+		"@fortawesome/free-brands-svg-icons": "^6.3.0",
+		"@fortawesome/free-solid-svg-icons": "^6.3.0",
+		"@fortawesome/vue-fontawesome": "^3.0.3",
 		"@rollup/plugin-alias": "^4.0.3",
 		"@rollup/plugin-commonjs": "^24.0.1",
 		"@rollup/plugin-json": "^6.0.0",

pnpm-lock.yaml

@@ -1,9 +1,21 @@
 import { createApp } from 'vue';
 import App from './App.vue';
 import CodeBlock from '@/index';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { faCopyright, faHouse } from '@fortawesome/free-solid-svg-icons';
+import { faGithub, faNpm } from '@fortawesome/free-brands-svg-icons';
+
+library.add({
+	faCopyright,
+	faGithub,
+	faHouse,
+	faNpm,
+});
 
 createApp(App)
 	.use(CodeBlock, {
 		theme: 'neon-bunny',
 	})
+	.component('fa-icon', FontAwesomeIcon)
 	.mount('#app');

src/main.ts

@@ -90,8 +90,8 @@ import UAParser from 'ua-parser-js';
 import { Props } from '@/types';
 
 import StatusIcons from '@/plugin/StatusIcons.vue';
-const neonBunnyCarrotTheme = import.meta.glob('./theme/neon-bunny-carrot.css', { eager: true, as: 'raw' });
-const neonBunnyTheme = import.meta.glob('./theme/neon-bunny.css', { eager: true, as: 'raw' });
+const neonBunnyCarrotTheme = import.meta.glob('./themes/neon-bunny-carrot.css', { eager: true, as: 'raw' });
+const neonBunnyTheme = import.meta.glob('./themes/neon-bunny.css', { eager: true, as: 'raw' });
 const prismTheme = import.meta.glob('prismjs/themes/prism.css', { eager: true, as: 'raw' });
 const prismThemeCoy = import.meta.glob('prismjs/themes/prism-coy.css', { eager: true, as: 'raw' });
 const prismThemeDark = import.meta.glob('prismjs/themes/prism-dark.css', { eager: true, as: 'raw' });
@@ -483,5 +483,10 @@ function runCode(): void {
 
 <style lang="scss" scoped>
 @import './styles/main';
+
+.foo {
+	display: block;
+	z-index: 3;
+}
 </style>
 

src/plugin/CodeBlock.vue

@@ -24,6 +24,7 @@ module.exports =
 		// ---------------------------- Possible errors
 		// Color
 		'color-no-invalid-hex': true,
+		'hue-degree-notation': 'number',
 
 		// Font family
 		'font-family-no-duplicate-names': true,

stylelint.config.js

@@ -21,6 +21,7 @@ export default defineConfig({
 			fix: true,
 			include: [
 				'src/**/*.{css,scss,sass,vue}',
+				'./src/components/**/*.{css,scss,sass,vue}',
 				'./src/plugin/styles/*.{css,scss,sass}'
 			],
 		}),