mirror of
https://github.com/R0m1k3/Priceflow.git
synced 2026-10-17 20:28:31 +02:00
fix: Rename use-auth.js to use-auth.jsx for JSX support
This commit is contained in:
2875 files changed
+459559
-2
No files matched your search
+15
@@ -0,0 +1,15 @@
|
||||
ISC License
|
||||
|
||||
Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
|
||||
|
||||
Permission to use, copy, modify, and/or distribute this software for any
|
||||
purpose with or without fee is hereby granted, provided that the above
|
||||
copyright notice and this permission notice appear in all copies.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
|
||||
WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
|
||||
MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
|
||||
ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
|
||||
WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
|
||||
ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
|
||||
OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
|
||||
+141
@@ -0,0 +1,141 @@
|
||||
# Lucide React
|
||||
|
||||
Implementation of the lucide icon library for react applications.
|
||||
|
||||
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add lucide-react
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```sh
|
||||
npm install lucide-react
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's built with ES modules so it's completely tree-shakable.
|
||||
Each icon can be imported as a react component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
```js
|
||||
import { Camera } from 'lucide-react';
|
||||
|
||||
const App = () => {
|
||||
return <Camera color="red" size={48} />;
|
||||
};
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default |
|
||||
| ------------- | -------- | ------------ |
|
||||
| `size` | _Number_ | 24 |
|
||||
| `color` | _String_ | currentColor |
|
||||
| `strokeWidth` | _Number_ | 2 |
|
||||
|
||||
### Custom props
|
||||
|
||||
You can also pass custom props that will be added in the svg as attributes.
|
||||
|
||||
```js
|
||||
const App = () => {
|
||||
return <Camera fill="red" />;
|
||||
};
|
||||
```
|
||||
|
||||
### Generic icon component
|
||||
|
||||
It is possible to create a generic icon component to load icons.
|
||||
|
||||
> :warning: The example below is importing all ES modules. This is **not** recommended when you using a bundler since your application build size will grow substantially.
|
||||
|
||||
```js
|
||||
import { icons } from 'lucide-react';
|
||||
|
||||
const Icon = ({ name, color, size }) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
```
|
||||
|
||||
#### With Dynamic Imports
|
||||
|
||||
Lucide react exports a dynamic import map `dynamicIconImports`. Useful for applications that want to show icons dynamically by icon name. For example when using a content management system with where icon names are stored in a database.
|
||||
|
||||
When using client side rendering, it will fetch the icon component when it's needed. This will reduce the initial bundle size.
|
||||
|
||||
The keys of the dynamic import map are the lucide original icon names.
|
||||
|
||||
Example with React suspense:
|
||||
|
||||
```tsx
|
||||
import React, { lazy, Suspense } from 'react';
|
||||
import { dynamicIconImports, LucideProps } from 'lucide-react';
|
||||
|
||||
const fallback = <div style={{ background: '#ddd', width: 24, height: 24 }}/>
|
||||
|
||||
interface IconProps extends Omit<LucideProps, 'ref'> {
|
||||
name: keyof typeof dynamicIconImports;
|
||||
}
|
||||
|
||||
const Icon = ({ name, ...props }: IconProps) => {
|
||||
const LucideIcon = lazy(dynamicIconImports[name]);
|
||||
|
||||
return (
|
||||
<Suspense fallback={fallback}>
|
||||
<LucideIcon {...props} />
|
||||
</Suspense>
|
||||
);
|
||||
}
|
||||
|
||||
export default Icon
|
||||
```
|
||||
|
||||
##### NextJS Example
|
||||
|
||||
In NextJS, [the dynamic function](https://nextjs.org/docs/pages/building-your-application/optimizing/lazy-loading#nextdynamic) can be used to dynamically load the icon component.
|
||||
|
||||
To make dynamic imports work with NextJS, you need to add `lucide-react` to the [`transpilePackages`](https://nextjs.org/docs/app/api-reference/next-config-js/transpilePackages) option in your `next.config.js` like this:
|
||||
|
||||
```js
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
transpilePackages: ['lucide-react'] // add this
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
|
||||
```
|
||||
|
||||
You can then start using it:
|
||||
|
||||
```tsx
|
||||
import dynamic from 'next/dynamic'
|
||||
import { LucideProps } from 'lucide-react';
|
||||
import dynamicIconImports from 'lucide-react/dynamicIconImports';
|
||||
|
||||
interface IconProps extends LucideProps {
|
||||
name: keyof typeof dynamicIconImports;
|
||||
}
|
||||
|
||||
const Icon = ({ name, ...props }: IconProps) => {
|
||||
const LucideIcon = dynamic(dynamicIconImports[name])
|
||||
|
||||
return <LucideIcon {...props} />;
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
```
|
||||
+26334
File diff suppressed because it is too large.
Load diff
+1325
File diff suppressed because it is too large.
Load diff
+1
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"dynamicIconImports.js","sources":["src/dynamicIconImports.ts"],"sourcesContent":["const dynamicIconImports = {\n 'accessibility': () => import('./icons/accessibility'),\n 'activity-square': () => import('./icons/activity-square'),\n 'activity': () => import('./icons/activity'),\n 'air-vent': () => import('./icons/air-vent'),\n 'airplay': () => import('./icons/airplay'),\n 'alarm-check': () => import('./icons/alarm-check'),\n 'alarm-clock-off': () => import('./icons/alarm-clock-off'),\n 'alarm-clock': () => import('./icons/alarm-clock'),\n 'alarm-minus': () => import('./icons/alarm-minus'),\n 'alarm-plus': () => import('./icons/alarm-plus'),\n 'album': () => import('./icons/album'),\n 'alert-circle': () => import('./icons/alert-circle'),\n 'alert-octagon': () => import('./icons/alert-octagon'),\n 'alert-triangle': () => import('./icons/alert-triangle'),\n 'align-center-horizontal': () => import('./icons/align-center-horizontal'),\n 'align-center-vertical': () => import('./icons/align-center-vertical'),\n 'align-center': () => import('./icons/align-center'),\n 'align-end-horizontal': () => import('./icons/align-end-horizontal'),\n 'align-end-vertical': () => import('./icons/align-end-vertical'),\n 'align-horizontal-distribute-center': () => import('./icons/align-horizontal-distribute-center'),\n 'align-horizontal-distribute-end': () => import('./icons/align-horizontal-distribute-end'),\n 'align-horizontal-distribute-start': () => import('./icons/align-horizontal-distribute-start'),\n 'align-horizontal-justify-center': () => import('./icons/align-horizontal-justify-center'),\n 'align-horizontal-justify-end': () => import('./icons/align-horizontal-justify-end'),\n 'align-horizontal-justify-start': () => import('./icons/align-horizontal-justify-start'),\n 'align-horizontal-space-around': () => import('./icons/align-horizontal-space-around'),\n 'align-horizontal-space-between': () => import('./icons/align-horizontal-space-between'),\n 'align-justify': () => import('./icons/align-justify'),\n 'align-left': () => import('./icons/align-left'),\n 'align-right': () => import('./icons/align-right'),\n 'align-start-horizontal': () => import('./icons/align-start-horizontal'),\n 'align-start-vertical': () => import('./icons/align-start-vertical'),\n 'align-vertical-distribute-center': () => import('./icons/align-vertical-distribute-center'),\n 'align-vertical-distribute-end': () => import('./icons/align-vertical-distribute-end'),\n 'align-vertical-distribute-start': () => import('./icons/align-vertical-distribute-start'),\n 'align-vertical-justify-center': () => import('./icons/align-vertical-justify-center'),\n 'align-vertical-justify-end': () => import('./icons/align-vertical-justify-end'),\n 'align-vertical-justify-start': () => import('./icons/align-vertical-justify-start'),\n 'align-vertical-space-around': () => import('./icons/align-vertical-space-around'),\n 'align-vertical-space-between': () => import('./icons/align-vertical-space-between'),\n 'ampersand': () => import('./icons/ampersand'),\n 'ampersands': () => import('./icons/ampersands'),\n 'anchor': () => import('./icons/anchor'),\n 'angry': () => import('./icons/angry'),\n 'annoyed': () => import('./icons/annoyed'),\n 'antenna': () => import('./icons/antenna'),\n 'aperture': () => import('./icons/aperture'),\n 'app-window': () => import('./icons/app-window'),\n 'apple': () => import('./icons/apple'),\n 'archive-restore': () => import('./icons/archive-restore'),\n 'archive-x': () => import('./icons/archive-x'),\n 'archive': () => import('./icons/archive'),\n 'area-chart': () => import('./icons/area-chart'),\n 'armchair': () => import('./icons/armchair'),\n 'arrow-big-down-dash': () => import('./icons/arrow-big-down-dash'),\n 'arrow-big-down': () => import('./icons/arrow-big-down'),\n 'arrow-big-left-dash': () => import('./icons/arrow-big-left-dash'),\n 'arrow-big-left': () => import('./icons/arrow-big-left'),\n 'arrow-big-right-dash': () => import('./icons/arrow-big-right-dash'),\n 'arrow-big-right': () => import('./icons/arrow-big-right'),\n 'arrow-big-up-dash': () => import('./icons/arrow-big-up-dash'),\n 'arrow-big-up': () => import('./icons/arrow-big-up'),\n 'arrow-down-0-1': () => import('./icons/arrow-down-0-1'),\n 'arrow-down-1-0': () => import('./icons/arrow-down-1-0'),\n 'arrow-down-a-z': () => import('./icons/arrow-down-a-z'),\n 'arrow-down-circle': () => import('./icons/arrow-down-circle'),\n 'arrow-down-from-line': () => import('./icons/arrow-down-from-line'),\n 'arrow-down-left-from-circle': () => import('./icons/arrow-down-left-from-circle'),\n 'arrow-down-left-square': () => import('./icons/arrow-down-left-square'),\n 'arrow-down-left': () => import('./icons/arrow-down-left'),\n 'arrow-down-narrow-wide': () => import('./icons/arrow-down-narrow-wide'),\n 'arrow-down-right-from-circle': () => import('./icons/arrow-down-right-from-circle'),\n 'arrow-down-Line truncated
|
||||
+69
@@ -0,0 +1,69 @@
|
||||
{
|
||||
"name": "lucide-react",
|
||||
"description": "A Lucide icon library package for React applications",
|
||||
"version": "0.292.0",
|
||||
"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-react"
|
||||
},
|
||||
"keywords": [
|
||||
"Lucide",
|
||||
"Angular",
|
||||
"Feather",
|
||||
"Icons",
|
||||
"Icon",
|
||||
"SVG",
|
||||
"Feather Icons",
|
||||
"Fontawesome",
|
||||
"Font Awesome"
|
||||
],
|
||||
"author": "Eric Fennis",
|
||||
"amdName": "lucide-react",
|
||||
"main": "dist/cjs/lucide-react.js",
|
||||
"main:umd": "dist/umd/lucide-react.js",
|
||||
"module": "dist/esm/lucide-react.js",
|
||||
"unpkg": "dist/umd/lucide-react.min.js",
|
||||
"typings": "dist/lucide-react.d.ts",
|
||||
"sideEffects": false,
|
||||
"files": [
|
||||
"dist",
|
||||
"dynamicIconImports.js",
|
||||
"dynamicIconImports.js.map",
|
||||
"dynamicIconImports.d.ts"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^5.16.5",
|
||||
"@testing-library/react": "^11.2.6",
|
||||
"@types/prop-types": "^15.7.5",
|
||||
"@types/react": "^18.0.21",
|
||||
"@vitejs/plugin-react": "^2.1.0",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2",
|
||||
"rollup": "^3.5.1",
|
||||
"rollup-plugin-dts": "^5.0.0",
|
||||
"typescript": "^4.8.4",
|
||||
"vite": "^4.3.9",
|
||||
"vitest": "^0.32.2",
|
||||
"@lucide/build-icons": "1.0.0",
|
||||
"@lucide/rollup-plugins": "1.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.5.1 || ^17.0.0 || ^18.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "pnpm clean && pnpm copy:license && pnpm build:icons && pnpm typecheck && pnpm build:bundles",
|
||||
"copy:license": "cp ../../LICENSE ./LICENSE",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.ts && rm -f dynamicIconImports.*",
|
||||
"build:icons": "build-icons --output=./src --templateSrc=./scripts/exportTemplate.mjs --renderUniqueKey --withAliases --withDynamicImports --separateAliasesFile --aliasesFileExtension=.ts --iconFileExtension=.ts --exportFileName=index.ts",
|
||||
"build:types": "node ./scripts/buildTypes.mjs",
|
||||
"build:bundles": "rollup -c ./rollup.config.mjs",
|
||||
"typecheck": "tsc",
|
||||
"typecheck:watch": "tsc -w",
|
||||
"test": "vitest run",
|
||||
"version": "pnpm version --git-tag-version=false"
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user