From 9e68779d22254c12863cf82eea9d8f151472ce2a Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Tue, 23 Jan 2024 17:45:43 +0100 Subject: [PATCH] create new vue directory --- packages/vue/README.md | 106 +++++++++++++++++++++++++++++++++ packages/vue/package.json | 62 +++++++++++++++++++ packages/vue/rollup.config.mjs | 75 +++++++++++++++++++++++ packages/vue/tsconfig.json | 16 +++++ packages/vue/vitest.config.mts | 11 ++++ 5 files changed, 270 insertions(+) create mode 100644 packages/vue/README.md create mode 100644 packages/vue/package.json create mode 100644 packages/vue/rollup.config.mjs create mode 100644 packages/vue/tsconfig.json create mode 100644 packages/vue/vitest.config.mts diff --git a/packages/vue/README.md b/packages/vue/README.md new file mode 100644 index 000000000..6f854ef22 --- /dev/null +++ b/packages/vue/README.md @@ -0,0 +1,106 @@ +# Lucide Vue + +Implementation of the lucide icon library for Vue 3 applications. + +> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). + +> :warning: This version of lucide is for Vue 3, For Vue 2 got to [lucide-vue](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue#lucide-vue) + +## Installation + +```sh +yarn add @lucide/vue +``` + +or + +```sh +npm install @lucide/vue +``` + +## How to use + +It's build with ESmodules so it's completely tree-shakable. +Each icon can be imported as a vue component. + +### Example + +You can pass additional props to adjust the icon. + +```vue + + + +``` + +### Props + +| name | type | default | +| ----------------------- | --------- | ------------ | +| `size` | *number* | 24 | +| `color` | *string* | currentColor | +| `stroke-width` | *number* | 2 | +| `absolute-stroke-width` | *boolean* | false | +| `default-class` | *string* | lucide-icon | + +### Custom props + +You can also pass custom props that will be added in the svg as attributes. + +```vue + +``` + +### One generic icon component + +It is possible to create one generic icon component to load icons. + +> :warning: Example below importing all EsModules, caution using this example, not recommended when you using bundlers, your application build size will grow strongly. + +#### Icon Component Example + +```vue + + + +``` + +##### Then you can use it like this + +```vue + +``` diff --git a/packages/vue/package.json b/packages/vue/package.json new file mode 100644 index 000000000..debf132bb --- /dev/null +++ b/packages/vue/package.json @@ -0,0 +1,62 @@ +{ + "name": "@lucide/vue", + "version": "0.0.1", + "author": "Eric Fennis", + "description": "A Lucide icon library package for Vue 3 applications", + "license": "ISC", + "homepage": "https://lucide.dev", + "bugs": "https://github.com/lucide-icons/lucide/issues", + "repository": { + "type": "git", + "url": "https://github.com/lucide-icons/lucide.git", + "directory": "packages/vue" + }, + "keywords": [ + "Lucide", + "Vue", + "Feather", + "Icons", + "Icon", + "SVG", + "Feather Icons", + "Fontawesome", + "Font Awesome" + ], + "amdName": "lucide-vue", + "source": "build/lucide-vue.js", + "main": "dist/cjs/lucide-vue.js", + "main:umd": "dist/umd/lucide-vue.js", + "module": "dist/esm/lucide-vue.js", + "unpkg": "dist/umd/lucide-vue.min.js", + "typings": "dist/lucide-vue.d.ts", + "sideEffects": false, + "files": [ + "dist", + "nuxt.js" + ], + "scripts": { + "build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm build:bundles", + "copy:license": "cp ../../LICENSE ./LICENSE", + "clean": "rm -rf dist && rm -rf ./src/icons/*.ts", + "build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts", + "build:bundles": "rollup -c ./rollup.config.mjs", + "test": "vitest run", + "version": "pnpm version --git-tag-version=false" + }, + "devDependencies": { + "@lucide/build-icons": "workspace:*", + "@lucide/rollup-plugins": "workspace:*", + "@testing-library/jest-dom": "^6.1.6", + "@testing-library/vue": "^8.0.1", + "@vitejs/plugin-vue": "^4.6.2", + "@vue/test-utils": "2.4.3", + "rollup": "^4.9.2", + "rollup-plugin-dts": "^6.1.0", + "vite": "5.0.12", + "vitest": "^1.1.1", + "vue": "^3.0.1" + }, + "peerDependencies": { + "vue": ">=3.0.1" + } +} diff --git a/packages/vue/rollup.config.mjs b/packages/vue/rollup.config.mjs new file mode 100644 index 000000000..dd528cb35 --- /dev/null +++ b/packages/vue/rollup.config.mjs @@ -0,0 +1,75 @@ +import plugins, { replace } from '@lucide/rollup-plugins'; +import pkg from './package.json' assert { type: 'json' }; +import dts from "rollup-plugin-dts"; + +const packageName = 'LucideVue'; +const outputFileName = 'lucide-vue'; +const outputDir = 'dist'; +const inputs = ['src/lucide-vue.ts']; +const bundles = [ + { + format: 'umd', + inputs, + outputDir, + minify: true, + }, + { + format: 'umd', + inputs, + outputDir, + }, + { + format: 'cjs', + inputs, + outputDir, + }, + { + format: 'esm', + inputs, + outputDir, + preserveModules: true, + }, +]; + +const configs = bundles + .map(({ inputs, outputDir, format, minify, preserveModules }) => + inputs.map(input => ({ + input, + plugins: plugins(pkg, minify), + external: ['vue'], + output: { + name: packageName, + ...(preserveModules + ? { + dir: `${outputDir}/${format}`, + } + : { + file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`, + }), + format, + preserveModules, + sourcemap: true, + globals: { + vue: 'vue', + }, + }, + })), + ) + .flat(); + + export default [ + { + input: inputs[0], + output: [{ + file: `dist/${outputFileName}.d.ts`, format: "es" + }], + plugins: [ + dts({ + compilerOptions: { + preserveSymlinks: false + } + }) + ], + }, + ...configs + ]; diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json new file mode 100644 index 000000000..e605a4cde --- /dev/null +++ b/packages/vue/tsconfig.json @@ -0,0 +1,16 @@ +{ + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "moduleResolution": "Node", + "strict": true, + "jsx": "preserve", + "resolveJsonModule": true, + "isolatedModules": true, + "esModuleInterop": true, + "lib": ["ESNext", "DOM"], + "skipLibCheck": true, + "noEmit": true, + } +} diff --git a/packages/vue/vitest.config.mts b/packages/vue/vitest.config.mts new file mode 100644 index 000000000..bd4e60680 --- /dev/null +++ b/packages/vue/vitest.config.mts @@ -0,0 +1,11 @@ +import { defineConfig } from 'vitest/config' +import vue from '@vitejs/plugin-vue' + +export default defineConfig({ + plugins: [vue()], + test: { + globals: true, + environment: 'jsdom', + setupFiles: './tests/setupVitest.js', + }, +});