airplane_mode [#1406]

├── .eslintignore ├── .nuxtrc ├── playground ├── package.json ├── nuxt.config.ts ├── assets │ └── icons │ │ ├── admin │ │ ├── badge.svg │ │ └── form │ │ │ └── bug.svg │ │ ├── user │ │ └── badge.svg │ │ ├── fire.svg │ │ ├── foxcode-logo.svg │ │ ├── javascript.svg │ │ ├── notused.svg │ │ ├── css3.svg │ │ ├── airplane.svg │ │ └── nodejs.svg └── app.vue ├── .eslintrc ├── .editorconfig ├── tsconfig.json ├── src ├── module.ts └── runtime │ └── components │ └── nuxt-icon.vue ├── .gitignore ├── .github └── ISSUE_TEMPLATE │ └── bug_report.md ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | dist 2 | node_modules 3 | -------------------------------------------------------------------------------- /.nuxtrc: -------------------------------------------------------------------------------- 1 | imports.autoImport=false 2 | typescript.includeWorkspace=true 3 | -------------------------------------------------------------------------------- /playground/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "name": "my-module-playground" 4 | } 5 | -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": [ 3 | "@nuxtjs/eslint-config-typescript" 4 | ], 5 | "rules": { 6 | "@typescript-eslint/no-unused-vars": [ 7 | "off" 8 | ] 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | indent_size = 2 5 | indent_style = space 6 | end_of_line = lf 7 | charset = utf-8 8 | trim_trailing_whitespace = true 9 | insert_final_newline = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | -------------------------------------------------------------------------------- /playground/nuxt.config.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtConfig } from 'nuxt/config' 2 | import NuxtIcons from '..' 3 | 4 | export default defineNuxtConfig({ 5 | modules: [ 6 | NuxtIcons 7 | ], 8 | NuxtIcons: { 9 | addPlugin: true 10 | } 11 | }) 12 | -------------------------------------------------------------------------------- /playground/assets/icons/admin/badge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /playground/assets/icons/user/badge.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "jsx": "preserve", 4 | "target": "ESNext", 5 | "module": "ESNext", 6 | "moduleResolution": "Node", 7 | "skipLibCheck": true, 8 | "strict": false, 9 | "allowJs": true, 10 | "noEmit": true, 11 | "resolveJsonModule": true, 12 | "allowSyntheticDefaultImports": true, 13 | "baseUrl": "." 14 | }, 15 | "include": ["./src/**/*"] 16 | } 17 | -------------------------------------------------------------------------------- /playground/assets/icons/fire.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/module.ts: -------------------------------------------------------------------------------- 1 | import { defineNuxtModule, createResolver, addComponent } from '@nuxt/kit' 2 | 3 | export interface ModuleOptions { 4 | // dir: string 5 | } 6 | 7 | export default defineNuxtModule({ 8 | meta: { 9 | name: 'nuxt-icons', 10 | configKey: 'nuxtIcons', 11 | compatibility: { 12 | nuxt: '>=3.0.0' 13 | } 14 | }, 15 | setup (options, nuxt) { 16 | const { resolve } = createResolver(import.meta.url) 17 | addComponent({ 18 | name: 'nuxt-icon', 19 | global: true, 20 | filePath: resolve('./runtime/components/nuxt-icon.vue') 21 | }) 22 | } 23 | }) 24 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | node_modules 3 | 4 | # Logs 5 | *.log* 6 | 7 | # Temp directories 8 | .temp 9 | .tmp 10 | .cache 11 | 12 | # Yarn 13 | **/.yarn/cache 14 | **/.yarn/*state* 15 | 16 | # Generated dirs 17 | dist 18 | 19 | # Nuxt 20 | .nuxt 21 | .output 22 | .vercel_build_output 23 | .build-* 24 | .env 25 | .netlify 26 | 27 | # Env 28 | .env 29 | 30 | # Testing 31 | reports 32 | coverage 33 | *.lcov 34 | .nyc_output 35 | 36 | # VSCode 37 | .vscode/* 38 | !.vscode/settings.json 39 | !.vscode/tasks.json 40 | !.vscode/launch.json 41 | !.vscode/extensions.json 42 | !.vscode/*.code-snippets 43 | 44 | # Intellij idea 45 | *.iml 46 | .idea 47 | 48 | # OSX 49 | .DS_Store 50 | .AppleDouble 51 | .LSOverride 52 | .AppleDB 53 | .AppleDesktop 54 | Network Trash Folder 55 | Temporary Items 56 | .apdisk 57 | -------------------------------------------------------------------------------- /playground/assets/icons/foxcode-logo.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/bug_report.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: Bug report 3 | about: Create a report to help us improve 4 | title: '' 5 | labels: bug 6 | assignees: '' 7 | 8 | --- 9 | 10 | **Describe the bug** 11 | A clear and concise description of what the bug is. 12 | 13 | **To Reproduce** 14 | Steps to reproduce the behavior, If an icon causes an error, post its SVG code here 15 | 16 | **Expected behavior** 17 | A clear and concise description of what you expected to happen. 18 | 19 | **Screenshots** 20 | If applicable, add screenshots to help explain your problem. 21 | 22 | **Desktop (please complete the following information):** 23 | - OS: [e.g. iOS] 24 | - Browser [e.g. chrome, safari] 25 | - Version [e.g. 22] 26 | 27 | **Smartphone (please complete the following information):** 28 | - Device: [e.g. iPhone6] 29 | - OS: [e.g. iOS8.1] 30 | - Browser [e.g. stock browser, safari] 31 | - Version [e.g. 22] 32 | 33 | **Additional context** 34 | Add any other context about the problem here. 35 | -------------------------------------------------------------------------------- /playground/assets/icons/javascript.svg: -------------------------------------------------------------------------------- 1 | 5 | -------------------------------------------------------------------------------- /playground/app.vue: -------------------------------------------------------------------------------- 1 | 33 | 34 | 39 | 40 | 45 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nuxt-icons", 3 | "version": "4.0.0", 4 | "description": "A Nuxt 4 module for easy SVG icons", 5 | "keywords": [ 6 | "nuxt", 7 | "nuxt4", 8 | "icons", 9 | "vue", 10 | "svg" 11 | ], 12 | "license": "MIT", 13 | "type": "module", 14 | "repository": { 15 | "type": "git", 16 | "url": "https://github.com/gitFoxCode/nuxt-icons.git" 17 | }, 18 | "homepage": "https://github.com/gitFoxCode/nuxt-icons", 19 | "author": { 20 | "name": "FoxCode", 21 | "url": "https://github.com/gitFoxCode" 22 | }, 23 | "main": "./dist/module.mjs", 24 | "types": "./dist/module.d.mts", 25 | "exports": { 26 | ".": { 27 | "import": "./dist/module.mjs", 28 | "types": "./dist/module.d.mts" 29 | } 30 | }, 31 | "files": [ 32 | "dist" 33 | ], 34 | "scripts": { 35 | "prepack": "nuxt-module-build", 36 | "dev": "nuxi dev playground", 37 | "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground" 38 | }, 39 | "peerDependencies": { 40 | "nuxt": "^4.0.0" 41 | }, 42 | "devDependencies": { 43 | "@nuxt/module-builder": "^1.0.2", 44 | "@nuxt/kit": "^4.0.3", 45 | "@nuxt/schema": "^4.0.0", 46 | "nuxt": "^4.0.0" 47 | }, 48 | "publishConfig": { 49 | "access": "public" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /playground/assets/icons/admin/form/bug.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/runtime/components/nuxt-icon.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 42 | 43 | 60 | -------------------------------------------------------------------------------- /playground/assets/icons/notused.svg: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /playground/assets/icons/css3.svg: -------------------------------------------------------------------------------- 1 | 24 | -------------------------------------------------------------------------------- /playground/assets/icons/airplane.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | [![nuxt-icons](https://i.imgur.com/67g6UGS.png "nuxt-icons banner")](https://github.com/gitFoxCode/nuxt-icons) 2 | # Nuxt Icons 3 | A module for Nuxt 4 that allows you to use your own SVG icons quickly and enjoyably. 4 | 5 | [![playground-usage](https://i.imgur.com/SMXXpVu.png "example of using icons in project")](https://github.com/gitFoxCode/nuxt-icons) 6 | 7 | ## Installation 8 | 1. `npx nuxi@latest module add icons` 9 | 2. add `nuxt-icons` to modules, **nuxt.config.ts**: 10 | ```javascript 11 | export default defineNuxtConfig({ 12 | modules: ['nuxt-icons'] 13 | }) 14 | ``` 15 | 16 | ## Usage 17 | 1. Create a `icons` folder in `assets`: `assets/icons` 18 | 2. Drop your icons with the **.svg** extension into the `icons` folder 19 | 3. In the project, use ``, where name is the name of your svg icon from the folder 20 | 21 | If you need to use the original color from the svg file (for example, if your icon has defs) you need to use the **filled** attribute:
22 | `` 23 | 24 | ### Subfolders 25 | If you would like to use some more complicated folder arrangement you will have to use paths from /icons 26 | 27 | If you have a svg icon in nested directories such as: 28 | ``` 29 | 📁icons 30 | └📁admin 31 | ⠀⠀└ badge.svg 32 | └📁user 33 | ⠀⠀└ badge.svg 34 | ``` 35 | then the icons's name will be based on its own path directory and filename. Therefore, the icon's name will be: 36 | ```html 37 | and 38 | ``` 39 | ## I don't like the basic styles that are assigned to the icons! 40 | The styles that have been created for the icons look as follows: 41 | ```css 42 | width: 1em; 43 | height: 1em; 44 | margin-bottom: 0.125em; 45 | vertical-align: middle; 46 | ``` 47 | You can easily change these styles using regular CSS for example in your index.vue file: 48 | ```vue 49 | 54 | ``` 55 | ## I would like to use icons from an icon pack available online 56 | You can download icons in SVG format and put them in the `/icons` folder, or use another module that supports this natively: [nuxt-icon](https://github.com/nuxt-modules/icon) 57 | 58 | ## What this module does 59 | The module retrieves all svg files from the assets/icons folder, overwrites the height and width from them to make them scalable, and using the `` component allows them to be used. `` injects the SVG code directly into ``. 60 | 61 | ## Features 62 | - Easy SVG icon management ✅ 63 | - HMR (You don't have to reset the project to reload the icons) ✅ 64 | - Ability to manipulate icons just like fonts, e.g. using `color`, `font-size` instead of `fill`,`width`,`height` ✅ 65 | - Ability to use the original color scheme for complex icons using the `filled` attribute ✅ 66 | - Icon only loads if used ✅ 67 | 68 | ## Development 69 | 70 | - Run `npm run dev:prepare` to generate type stubs. 71 | - Use `npm run dev` to start [playground](./playground) in development mode. 72 | 73 |
74 | 75 | ## Thoughts and ToDo's: 76 | - Automatic svg file optimization 77 | - Automatic icon scaling that have non-square dimensions to maintain their proportions (maybe with preserveAspectRatio) 78 | - ~~Usable for previous nuxt versions~~ (just use [something like this](https://github.com/gitFoxCode/TaleGalaxy/blob/main/client/src/components/SvgIcon.vue)) 79 | - If a lot of the same icons are used on the page create a separate svg sprite (significant improvement in performance) 80 | 81 | A big thank you to [@Diizzayy](https://github.com/Diizzayy) for his invaluable help in developing the project 82 | -------------------------------------------------------------------------------- /playground/assets/icons/nodejs.svg: -------------------------------------------------------------------------------- 1 | 48 | --------------------------------------------------------------------------------