diff --git a/packages/lucide-vue/README.md b/packages/lucide-vue/README.md deleted file mode 100644 index b1007b0e5..000000000 --- a/packages/lucide-vue/README.md +++ /dev/null @@ -1,128 +0,0 @@ -# Lucide Vue - -Implementation of the lucide icon library for Vue applications. - -> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide). - -> :warning: This version of lucide is for Vue 2, For Vue 3 got to [lucide-vue-next](https://github.com/lucide-icons/lucide/tree/main/packages/lucide-vue-next#lucide-vue-next) - -## 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 - -``` - -## Use with [@nuxt/components](https://github.com/nuxt/components#readme) - -### Setup - -In your `nuxt.config.js`, add `lucide-vue/nuxt` to your `buildModules` - -```js -export default { - buildModules: ['lucide-vue/nuxt'] -}; -``` - -### How to use - -Icon components are prefixed with `Icon`. Use icon components without importing them. - -### Example - -```html - -``` diff --git a/packages/lucide-vue/nuxt.js b/packages/lucide-vue/nuxt.js deleted file mode 100644 index 4c5c8122f..000000000 --- a/packages/lucide-vue/nuxt.js +++ /dev/null @@ -1,11 +0,0 @@ -import { join } from 'path'; - -export default function LucideNuxtPlugin() { - this.nuxt.hook('components:dirs', (dirs) => { - dirs.push({ - path: join(__dirname, 'dist', 'esm', 'icons'), - prefix: 'Icon', - ignore: ['**/index.js'], - }); - }); -} diff --git a/packages/lucide-vue/package.json b/packages/lucide-vue/package.json deleted file mode 100644 index 41501fd0a..000000000 --- a/packages/lucide-vue/package.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "name": "lucide-vue", - "version": "0.0.1", - "author": "Eric Fennis", - "description": "A Lucide icon library package for Vue 2 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/lucide-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", - "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 stats && rm -rf ./src/icons/*.js", - "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.4", - "@testing-library/vue": "^5.9.0", - "@vitejs/plugin-vue2": "2.2.0", - "@vue/test-utils": "1.3.0", - "rollup": "^3.23.0", - "typescript": "^4.9.5", - "vite": "5.0.12", - "vitest": "^0.32.2", - "vue": "2.7.14", - "vue-template-compiler": "2.7.14" - }, - "peerDependencies": { - "vue": "^2.6.12" - } -} diff --git a/packages/lucide-vue/rollup.config.mjs b/packages/lucide-vue/rollup.config.mjs deleted file mode 100644 index 911bacfe3..000000000 --- a/packages/lucide-vue/rollup.config.mjs +++ /dev/null @@ -1,59 +0,0 @@ -import plugins, { replace } from '@lucide/rollup-plugins'; -import pkg from './package.json' assert { type: 'json' }; - -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 configs; diff --git a/packages/lucide-vue/scripts/exportTemplate.mjs b/packages/lucide-vue/scripts/exportTemplate.mjs deleted file mode 100644 index b58291f79..000000000 --- a/packages/lucide-vue/scripts/exportTemplate.mjs +++ /dev/null @@ -1,26 +0,0 @@ -/* eslint-disable import/no-extraneous-dependencies */ -import base64SVG from '@lucide/build-icons/utils/base64SVG.mjs'; - -export default ({ componentName, iconName, children, getSvg, deprecated }) => { - const svgContents = getSvg(); - const svgBase64 = base64SVG(svgContents); - - return ` -import createLucideIcon from '../createLucideIcon'; - -/** - * @component @name ${componentName} - * @description Lucide SVG icon component, renders SVG Element with children. - * - * @preview ![img](data:image/svg+xml;base64,${svgBase64}) - https://lucide.dev/icons/${iconName} - * @see https://lucide.dev/guide/packages/lucide-vue - Documentation - * - * @param {Object} props - Lucide icons props and any valid SVG attribute - * @returns {Component} Vue Component - * ${deprecated ? '@deprecated' : ''} - */ -const ${componentName} = createLucideIcon('${componentName}Icon', ${JSON.stringify(children)}); - -export default ${componentName}; -`; -}; diff --git a/packages/lucide-vue/src/createLucideIcon.ts b/packages/lucide-vue/src/createLucideIcon.ts deleted file mode 100644 index 694c2c8ee..000000000 --- a/packages/lucide-vue/src/createLucideIcon.ts +++ /dev/null @@ -1,84 +0,0 @@ -import { Component } from 'vue'; -import { Vue, VueConfiguration } from 'vue/types/vue'; -import defaultAttributes from './defaultAttributes'; - -var showDeprecationWarning = true; - -type IconNode = [elementName: string, attrs: Record][] - -/** - * Converts string to KebabCase - * Copied from scripts/helper. If anyone knows how to properly import it here - * then please fix it. - * - * @param {string} string - * @returns {string} A kebabized string - */ -export const toKebabCase = (string: string) => string.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase(); - -export default (iconName: string, iconNode: IconNode): Component => ({ - name: iconName, - functional: true, - props: { - color: { - type: String, - default: 'currentColor', - }, - size: { - type: Number, - default: 24, - }, - strokeWidth: { - type: Number, - default: 2, - }, - absoluteStrokeWidth: { - type: Boolean, - default: false, - }, - defaultClass: { - type: String, - default: `lucide-icon lucide lucide-${toKebabCase(iconName).replace('-icon', '')}`, - }, - }, - render( - createElement, - { - props: { color, size, strokeWidth, absoluteStrokeWidth, defaultClass }, - data, - children = [], - }, - ) { - if (showDeprecationWarning) { - console.warn( - '[Lucide Vue] This package will be deprecated end of 2023. Please upgrade to Vue 3 and use the latest lucide package for Vue.', - ); - showDeprecationWarning = false; - } - - return createElement( - 'svg', - { - // prettier-ignore - class: [defaultClass, data.class, data.staticClass, data.attrs && data.attrs.class].filter(Boolean), - style: [data.style, data.staticStyle, data.attrs && data.attrs.style].filter(Boolean), - attrs: { - ...defaultAttributes, - width: size, - height: size, - stroke: color, - 'stroke-width': - absoluteStrokeWidth - ? Number(strokeWidth) * 24 / Number(size) - : strokeWidth, - ...data.attrs, - }, - on: data?.on || {} - }, - [ - ...iconNode.map(([tag, attrs]) => createElement(String(tag), { attrs })), - ...children - ], - ); - }, -}); diff --git a/packages/lucide-vue/src/defaultAttributes.ts b/packages/lucide-vue/src/defaultAttributes.ts deleted file mode 100644 index 989a5aa89..000000000 --- a/packages/lucide-vue/src/defaultAttributes.ts +++ /dev/null @@ -1,13 +0,0 @@ -const defaultAttributes = { - xmlns: 'http://www.w3.org/2000/svg', - width: 24, - height: 24, - viewBox: '0 0 24 24', - fill: 'none', - stroke: 'currentColor', - 'stroke-width': 2, - 'stroke-linecap': 'round', - 'stroke-linejoin': 'round', -}; - -export default defaultAttributes diff --git a/packages/lucide-vue/src/icons/.gitkeep b/packages/lucide-vue/src/icons/.gitkeep deleted file mode 100644 index e3d85f774..000000000 --- a/packages/lucide-vue/src/icons/.gitkeep +++ /dev/null @@ -1 +0,0 @@ -Folder for generated icons diff --git a/packages/lucide-vue/src/lucide-vue.ts b/packages/lucide-vue/src/lucide-vue.ts deleted file mode 100644 index 2e2838243..000000000 --- a/packages/lucide-vue/src/lucide-vue.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './icons'; -export * as icons from './icons'; -export * from './aliases'; diff --git a/packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap b/packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap deleted file mode 100644 index d354ef533..000000000 --- a/packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap +++ /dev/null @@ -1,215 +0,0 @@ -// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html - -exports[`Using lucide icon components > should add a class to the element 1`] = ` -
- - - - - - -
-`; - -exports[`Using lucide icon components > should add a style attribute to the element 1`] = ` -
- - - - - - -
-`; - -exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = ` -
- - - - - - -
-`; - -exports[`Using lucide icon components > should pass children to the icon slot 1`] = ` -
- - - - - - - Hello World - - -
-`; - -exports[`Using lucide icon components > should render an component 1`] = ` -
- - - - - - -
-`; diff --git a/packages/lucide-vue/tests/lucide-vue.spec.ts b/packages/lucide-vue/tests/lucide-vue.spec.ts deleted file mode 100644 index 53ea689b0..000000000 --- a/packages/lucide-vue/tests/lucide-vue.spec.ts +++ /dev/null @@ -1,133 +0,0 @@ -import { describe, it, expect, vi } from 'vitest'; -import { render, fireEvent, cleanup } from '@testing-library/vue' -import { Smile, Pen, Edit2 } from '../src/lucide-vue' -import { afterEach } from 'vitest'; -import { VueClass } from '@vue/test-utils'; - -describe('Using lucide icon components', () => { - afterEach(() => cleanup()) - - it('should render an component', () => { - const {container} = render(Smile as VueClass) - expect(container).toMatchSnapshot(); - }); - - it('should adjust the size, stroke color and stroke width', () => { - const {container} = render(Smile as VueClass, { - props: { - size: 48, - color: 'red', - strokeWidth: 4 - } - }) - - const [icon] = document.getElementsByClassName('lucide'); - - expect(icon.getAttribute('width')).toBe('48') - expect(icon.getAttribute('stroke')).toBe('red') - expect(icon.getAttribute('stroke-width')).toBe('4') - - expect(container).toMatchSnapshot(); - }); - - - it('should add a class to the element', () => { - const {container} = render(Smile as VueClass, { - attrs: { - class: "my-icon" - } - }) - - expect(container).toMatchSnapshot(); - - const [icon] = document.getElementsByClassName('lucide'); - - expect(icon).toHaveClass('my-icon') - expect(icon).toHaveClass('lucide-smile') - expect(icon).toHaveClass('lucide') - }); - - it('should add a style attribute to the element', () => { - const {container} = render(Smile as VueClass, { - attrs: { - style: 'position: absolute', - } - }) - - expect(container).toMatchSnapshot(); - - const [icon] = document.getElementsByClassName('lucide'); - - expect(icon).toHaveStyle({ position: 'absolute' }) - }); - - it('should call the onClick event', async () => { - const onClick = vi.fn() - render(Smile as VueClass, { - listeners: { - click: onClick - } - }) - - const [icon] = document.getElementsByClassName('lucide'); - - await fireEvent.click(icon) - - expect(onClick).toHaveBeenCalled() - }); - - it('should pass children to the icon slot', () => { - const testText = 'Hello World' - const template = `${testText}` - const { getByText, container } = render(Smile as VueClass, { - slots: { - default: { template } - } - }) - - const textElement = getByText(testText) - - expect(textElement).toBeInTheDocument() - expect(container).toMatchSnapshot(); - }); - - it('should render the alias icon', () => { - const { getByText, container } = render(Pen as VueClass, { - props: { - size: '48', - color: 'red', - strokeWidth: '4' - } - }) - - const PenIconRenderedHTML = container.innerHTML - - cleanup() - - const { container: Edit2Container } = render(Edit2 as VueClass, { - props: { - size: '48', - color: 'red', - strokeWidth: '4' - } - }) - - expect(PenIconRenderedHTML).toBe(Edit2Container.innerHTML) - }) - - it('should not scale the strokeWidth when absoluteStrokeWidth is set', () => { - const { getByText, container } = render(Pen as VueClass, { - props: { - size: '48', - color: 'red', - absoluteStrokeWidth: true - } - }) - - const [icon] = document.getElementsByClassName('lucide'); - - expect(icon.getAttribute('width')).toBe('48') - expect(icon.getAttribute('stroke')).toBe('red') - expect(icon.getAttribute('stroke-width')).toBe('1') - }) -}); diff --git a/packages/lucide-vue/tests/setupVitest.js b/packages/lucide-vue/tests/setupVitest.js deleted file mode 100644 index 7b0828bfa..000000000 --- a/packages/lucide-vue/tests/setupVitest.js +++ /dev/null @@ -1 +0,0 @@ -import '@testing-library/jest-dom'; diff --git a/packages/lucide-vue/tsconfig.json b/packages/lucide-vue/tsconfig.json deleted file mode 100644 index e683b6c91..000000000 --- a/packages/lucide-vue/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "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 - }, - "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"], -} diff --git a/packages/lucide-vue/vitest.config.ts b/packages/lucide-vue/vitest.config.ts deleted file mode 100644 index 50a973317..000000000 --- a/packages/lucide-vue/vitest.config.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { defineConfig } from 'vitest/config' -import vue from '@vitejs/plugin-vue2' - -export default defineConfig({ - plugins: [vue()], - test: { - globals: true, - environment: 'jsdom', - transformMode: { - web: [/\.jsx?$/], - }, - setupFiles: './tests/setupVitest.js', - threads: false, - isolate: false, - }, - resolve: { - conditions: ['development', 'browser'], - }, -}); diff --git a/packages/vue/README.md b/packages/vue/README.md index 6f854ef22..e7194a340 100644 --- a/packages/vue/README.md +++ b/packages/vue/README.md @@ -4,8 +4,6 @@ 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