hipowered.dev/lucide
1
0
Fork 0
mirror of https://github.com/lucide-icons/lucide.git synced 2026-11-13 13:48:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Delete lucide-vue

Browse Source
This commit is contained in:
Eric Fennis
2024-01-23 18:24:03 +01:00
parent 294ec9c727
commit 701c2fb6b2
15 changed files with 0 additions and 774 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/lucide-vue/README.md
-128
View File
@@ -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
<template>
<Camera color="red" :size="32" />
</template>
<script>
// Returns Vue component
import { Camera } from 'lucide-vue';
export default {
name: 'My Component',
components: { Camera }
};
</script>
```
### 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
<template>
<Camera fill="red" />
</template>
```
### 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
<template>
<component :is="icon" />
</template>
<script>
import * as icons from 'lucide-vue';
export default {
props: {
name: {
type: String,
required: true
}
},
computed: {
icon() {
return icons[this.name];
}
}
};
</script>
```
##### Then you can use it like this
```vue
<template>
<div id="app">
<Icon name="Airplay" />
</div>
</template>
```
## 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
<IconCamera color="red" :size="32" />
```
packages/lucide-vue/nuxt.js
-11
View File
@@ -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'],
});
});
}
packages/lucide-vue/package.json
-62
View File
@@ -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"
}
}
packages/lucide-vue/rollup.config.mjs
-59
View File
@@ -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;
packages/lucide-vue/scripts/exportTemplate.mjs
-26
View File
@@ -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};
`;
};
packages/lucide-vue/src/createLucideIcon.ts
-84
View File
@@ -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<string, string>][]
/**
* 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
],
);
},
});
packages/lucide-vue/src/defaultAttributes.ts
-13
View File
@@ -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
packages/lucide-vue/src/icons/.gitkeep
-1
View File
@@ -1 +0,0 @@
Folder for generated icons
packages/lucide-vue/src/lucide-vue.ts
-3
View File
@@ -1,3 +0,0 @@
export * from './icons';
export * as icons from './icons';
export * from './aliases';
packages/lucide-vue/tests/__snapshots__/lucide-vue.spec.ts.snap
-215
View File
@@ -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`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile my-icon"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should add a style attribute to the element 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
style="position: absolute"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should adjust the size, stroke color and stroke width 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="48"
stroke="red"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="4"
viewBox="0 0 24 24"
width="48"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
exports[`Using lucide icon components > should pass children to the icon slot 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
<text>
Hello World
</text>
</svg>
</div>
`;
exports[`Using lucide icon components > should render an component 1`] = `
<div>
<svg
class="lucide-icon lucide lucide-smile"
fill="none"
height="24"
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
key="1mglay"
r="10"
/>
<path
d="M8 14s1.5 2 4 2 4-2 4-2"
key="1y1vjs"
/>
<line
key="yxxnd0"
x1="9"
x2="9.01"
y1="9"
y2="9"
/>
<line
key="1p4y9e"
x1="15"
x2="15.01"
y1="9"
y2="9"
/>
</svg>
</div>
`;
packages/lucide-vue/tests/lucide-vue.spec.ts
-133
View File
@@ -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<any>)
expect(container).toMatchSnapshot();
});
it('should adjust the size, stroke color and stroke width', () => {
const {container} = render(Smile as VueClass<any>, {
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<any>, {
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<any>, {
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<any>, {
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 = `<text>${testText}</text>`
const { getByText, container } = render(Smile as VueClass<any>, {
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<any>, {
props: {
size: '48',
color: 'red',
strokeWidth: '4'
}
})
const PenIconRenderedHTML = container.innerHTML
cleanup()
const { container: Edit2Container } = render(Edit2 as VueClass<any>, {
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<any>, {
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')
})
});
packages/lucide-vue/tests/setupVitest.js
-1
View File
@@ -1 +0,0 @@
import '@testing-library/jest-dom';
packages/lucide-vue/tsconfig.json
-17
View File
@@ -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"],
}
packages/lucide-vue/vitest.config.ts
-19
View File
@@ -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'],
},
});
packages/vue/README.md
-2
View File
@@ -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