Compare commits
96 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
e731e808a3 | ||
|
|
099575b9cf | ||
|
|
d79a33d514 | ||
|
|
6630882137 | ||
|
|
a723c0f137 | ||
|
|
54a6ec1d5c | ||
|
|
4e53232d9d | ||
|
|
91d0a124ca | ||
|
|
1228999214 | ||
|
|
718f67d339 | ||
|
|
6cc2927ade | ||
|
|
a96e9db8e5 | ||
|
|
ced1431b6b | ||
|
|
82fcb2a896 | ||
|
|
846d303345 | ||
|
|
8ab0d4d739 | ||
|
|
cf19731e6a | ||
|
|
f86a6a960b | ||
|
|
9e63e97f31 | ||
|
|
81b85839eb | ||
|
|
15ac2cf282 | ||
|
|
1c1b6c7732 | ||
|
|
29236b45d1 | ||
|
|
1e9a09e8f3 | ||
|
|
9031285357 | ||
|
|
03fd0452f3 | ||
|
|
e4adf28a48 | ||
|
|
9af28b9247 | ||
|
|
e9879d5db0 | ||
|
|
95f66ca5b0 | ||
|
|
b72d86604b | ||
|
|
97c03c7d15 | ||
|
|
f8f98394f4 | ||
|
|
ff0901bf0c | ||
|
|
66f2dc24b1 | ||
|
|
fd20bc5fd9 | ||
|
|
997daac4e6 | ||
|
|
d218851416 | ||
|
|
acf51993d7 | ||
|
|
02cb296050 | ||
|
|
df3bd24540 | ||
|
|
75887dc14c | ||
|
|
a50076fcb9 | ||
|
|
eeff4e2718 | ||
|
|
f065767560 | ||
|
|
7cbc2ac5a7 | ||
|
|
494292618b | ||
|
|
820727329d | ||
|
|
c51bffbd54 | ||
|
|
cad3214584 | ||
|
|
733448d041 | ||
|
|
c7b9f9aaae | ||
|
|
d0e6b9c015 | ||
|
|
0e83769729 | ||
|
|
da5a92746f | ||
|
|
551cc30e79 | ||
|
|
09edf6d16c | ||
|
|
7cc4041a35 | ||
|
|
5418c63468 | ||
|
|
269d5fa2d0 | ||
|
|
c130e58c46 | ||
|
|
2a8f734a19 | ||
|
|
1ddce5b3cb | ||
|
|
859577768c | ||
|
|
606b6b2b22 | ||
|
|
10749409f1 | ||
|
|
77727bc40c | ||
|
|
59fe65b705 | ||
|
|
5e0d287cda | ||
|
|
910b2432ce | ||
|
|
3b05f0e574 | ||
|
|
62e5aae150 | ||
|
|
2dbf8ffaa3 | ||
|
|
938f7efeba | ||
|
|
ab00747371 | ||
|
|
4c42ebfcff | ||
|
|
182b127c12 | ||
|
|
2f3dfb4404 | ||
|
|
3348c1050d | ||
|
|
d0f26f4110 | ||
|
|
b450764c68 | ||
|
|
b71ae1e055 | ||
|
|
35d41c1763 | ||
|
|
7cdabd67be | ||
|
|
0922e72e3d | ||
|
|
f2582af4a3 | ||
|
|
61124e4619 | ||
|
|
60efb731fe | ||
|
|
96357adbe7 | ||
|
|
74c077b3ae | ||
|
|
af9dc9f510 | ||
|
|
abb6323d5e | ||
|
|
8fcec2a0b2 | ||
|
|
770d5a7557 | ||
|
|
58c11879c5 | ||
|
|
22ea86dad5 |
2
.github/ISSUE_TEMPLATE/bug_report.md
vendored
@@ -1,7 +1,7 @@
|
||||
---
|
||||
name: Bug report
|
||||
about: Create a report to help us improve
|
||||
labels: bug
|
||||
labels: "🐛 bug"
|
||||
---
|
||||
|
||||
<!--
|
||||
|
||||
7
.github/ISSUE_TEMPLATE/icon_request.md
vendored
@@ -1,15 +1,18 @@
|
||||
---
|
||||
name: Icon request
|
||||
about: Suggest an new icon for this project
|
||||
labels: "icon request"
|
||||
labels: "🙌 icon request"
|
||||
---
|
||||
|
||||
<!--
|
||||
Before creating an icon request, please search to see if someone has requested the icon already. If there is an open request, please add a 👍.
|
||||
A note about brand logos and related material : We follow the decision from Feather Icons (https://github.com/feathericons/feather/issues/763) to deprecate icons relating to brands.
|
||||
You will find some in the set, but we won't add any new ones. https://simpleicons.org has 24x24 SVG icons for this purpose.
|
||||
|
||||
-->
|
||||
|
||||
## Icon Request
|
||||
|
||||
* Icon name:
|
||||
* Use case:
|
||||
* Screenshots of similar icons:
|
||||
* _Screenshots_ of similar icons:
|
||||
|
||||
15
.github/PULL_REQUEST_TEMPLATE/new-icon.md
vendored
Normal file
@@ -0,0 +1,15 @@
|
||||
---
|
||||
name: New icon
|
||||
about: Add a new icon to the library
|
||||
labels: "🎨 <icon"
|
||||
---
|
||||
|
||||
<!-- Thanks for submitting an icon! Please make sure you read the icon design guide
|
||||
at https://github.com/lucide-icons/lucide/blob/master/docs/ICON_DESIGN_GUIDE.md beforehand,
|
||||
and please fill everything below. -->
|
||||
|
||||
- **Name of the icon** : <!-- `icon` -->
|
||||
- **Tags (alternative names for this icon)** (add them in tags.json) :
|
||||
- **What is the purpose of this icon?** : <!-- Shows that one can click it to... / Is used to denote or label... -->
|
||||
- **100% scale preview** : <!-- upload an image -->
|
||||
- **Have you considered alternative possibilities** for its naming or design? :
|
||||
16
.github/workflows/ci.yml
vendored
@@ -18,11 +18,11 @@ jobs:
|
||||
uses: actions/checkout@v2
|
||||
|
||||
- name: Fetch tags
|
||||
run: git fetch --tags
|
||||
run: git fetch --all --tags
|
||||
|
||||
- name: Get latest tag
|
||||
id: latest-tag
|
||||
run: echo "::set-output name=LATEST_TAG::$(git tag --list 2>/dev/null | tail -n1 2>/dev/null)"
|
||||
run: echo "::set-output name=LATEST_TAG::$(git describe --tags `git rev-list --tags --max-count=1`)"
|
||||
|
||||
- name: Get yarn cache directory path
|
||||
id: yarn_cache
|
||||
@@ -39,6 +39,9 @@ jobs:
|
||||
- name: Install dependencies
|
||||
run: yarn --pure-lockfile
|
||||
|
||||
- name: Check if we can patch
|
||||
run: .github/workflows/version-up.sh --patch
|
||||
|
||||
- name: Create new version
|
||||
id: new-version
|
||||
run: echo "::set-output name=NEW_VERSION::$(.github/workflows/version-up.sh --patch)"
|
||||
@@ -60,13 +63,12 @@ jobs:
|
||||
echo "${{ steps.new-version.outputs.NEW_VERSION }}"
|
||||
echo "${{ steps.change-log.outputs.CHANGE_LOG }}"
|
||||
|
||||
- name: Create Release
|
||||
id: create_release
|
||||
uses: actions/create-release@v1
|
||||
- name: Release
|
||||
uses: softprops/action-gh-release@v1
|
||||
env:
|
||||
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # This token is provided by Actions, you do not need to create your own token
|
||||
GITHUB_TOKEN: ${{ secrets.CREATE_RELEASE_TOKEN }}
|
||||
with:
|
||||
tag_name: ${{ steps.new-version.outputs.NEW_VERSION }}
|
||||
release_name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
|
||||
name: New icons ${{ steps.new-version.outputs.NEW_VERSION }}
|
||||
body: ${{ steps.change-log.outputs.CHANGE_LOG }}
|
||||
|
||||
|
||||
18
.github/workflows/close-stale-prs.yml
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
name: 'Close stale issues and PR'
|
||||
on:
|
||||
schedule:
|
||||
- cron: '45 1 * * *'
|
||||
|
||||
jobs:
|
||||
stale:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/stale@v3
|
||||
with:
|
||||
repo-token: ${{ secrets.GITHUB_TOKEN }}
|
||||
stale-pr-message: 'This PR is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
|
||||
close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
|
||||
close-pr-label: '🧶 stale'
|
||||
days-before-stale: 30
|
||||
days-before-close: 5
|
||||
days-before-pr-close: -1
|
||||
142
.github/workflows/release.yml
vendored
@@ -5,6 +5,12 @@ on:
|
||||
tags:
|
||||
- 'v*'
|
||||
|
||||
workflow_dispatch:
|
||||
inputs:
|
||||
version:
|
||||
description: 'Version'
|
||||
required: true
|
||||
|
||||
jobs:
|
||||
pre-build:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
@@ -16,7 +22,11 @@ jobs:
|
||||
steps:
|
||||
- name: Get the version
|
||||
id: get_version
|
||||
run: echo ::set-output name=VERSION::${GITHUB_REF/refs\/tags\/\v}
|
||||
run: |
|
||||
echo $VERSION_REF
|
||||
echo ::set-output name=VERSION::${VERSION_REF/refs\/tags\/\v}
|
||||
env:
|
||||
VERSION_REF: ${{ github.event.inputs.version || github.ref }}
|
||||
|
||||
- name: Get yarn cache directory path
|
||||
id: yarn_cache
|
||||
@@ -56,6 +66,7 @@ jobs:
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-package-json
|
||||
path: packages/lucide/package.json
|
||||
|
||||
lucide-react:
|
||||
@@ -92,6 +103,7 @@ jobs:
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-react-package-json
|
||||
path: packages/lucide-react/package.json
|
||||
|
||||
lucide-vue:
|
||||
@@ -132,16 +144,142 @@ jobs:
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-vue-package-json
|
||||
path: packages/lucide-vue/package.json
|
||||
|
||||
lucide-vue-next:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/setup-node@v2
|
||||
with:
|
||||
node-version: '12.x'
|
||||
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn --pure-lockfile
|
||||
|
||||
- name: Set Auth Token
|
||||
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- name: Set new version
|
||||
run: yarn workspace lucide-vue-next version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
|
||||
|
||||
- name: Build
|
||||
run: yarn workspace lucide-vue-next build
|
||||
|
||||
- name: Test
|
||||
run: yarn workspace lucide-vue-next test
|
||||
|
||||
- name: Publish
|
||||
run: yarn workspace lucide-vue-next publish
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-vue-next-package-json
|
||||
path: packages/lucide-vue-next/package.json
|
||||
|
||||
lucide-angular:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn --pure-lockfile
|
||||
|
||||
- name: Set Auth Token
|
||||
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- name: Set package.json version lucide
|
||||
run: yarn workspace lucide-angular version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
|
||||
|
||||
- name: Build
|
||||
run: yarn workspace lucide-angular build
|
||||
|
||||
- name: Test
|
||||
run: yarn workspace lucide-angular test:headless
|
||||
|
||||
- name: Publish
|
||||
run: yarn workspace lucide-angular publish dist
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-angular-package-json
|
||||
path: packages/lucide-angular/package.json
|
||||
|
||||
lucide-preact:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: pre-build
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/cache@v2
|
||||
with:
|
||||
path: ${{ needs.pre-build.outputs.YARN_CACHE_DIR }}
|
||||
key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
|
||||
restore-keys: |
|
||||
${{ runner.os }}-yarn-
|
||||
|
||||
- name: Install dependencies
|
||||
run: yarn --pure-lockfile
|
||||
|
||||
- name: Set Auth Token
|
||||
run: npm config set //registry.npmjs.org/:_authToken ${{ secrets.NPM_TOKEN }}
|
||||
|
||||
- name: Set package.json version lucide
|
||||
run: yarn workspace lucide-preact version --new-version ${{ needs.pre-build.outputs.VERSION }} --no-git-tag-version
|
||||
|
||||
- name: Build
|
||||
run: yarn workspace lucide-preact build
|
||||
|
||||
- name: Test
|
||||
run: yarn workspace lucide-preact test
|
||||
|
||||
- name: Publish
|
||||
run: yarn workspace lucide-preact publish
|
||||
|
||||
- name: Upload package.json
|
||||
uses: actions/upload-artifact@v2
|
||||
with:
|
||||
name: lucide-preact-package-json
|
||||
path: packages/lucide-preact/package.json
|
||||
|
||||
upload-package-jsons:
|
||||
if: github.repository == 'lucide-icons/lucide'
|
||||
runs-on: ubuntu-latest
|
||||
needs: [lucide, lucide-react, lucide-vue]
|
||||
needs: [pre-build, lucide, lucide-react, lucide-vue, lucide-vue-next, lucide-angular, lucide-preact]
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v2
|
||||
- uses: actions/download-artifact@v2
|
||||
|
||||
- name: Commit package.jsons
|
||||
run: |
|
||||
mv lucide-package-json/package.json packages/lucide/package.json
|
||||
mv lucide-react-package-json/package.json packages/lucide-react/package.json
|
||||
mv lucide-vue-package-json/package.json packages/lucide-vue/package.json
|
||||
mv lucide-preact-package-json/package.json packages/lucide-preact/package.json
|
||||
mv lucide-vue-next-package-json/package.json packages/lucide-vue-next/package.json
|
||||
mv lucide-angular-package-json/package.json packages/lucide-angular/package.json
|
||||
|
||||
- name: Commit package.jsons
|
||||
run: |
|
||||
git add packages/*/package.json
|
||||
|
||||
2
.github/workflows/version-up.sh
vendored
@@ -4,7 +4,7 @@
|
||||
|
||||
## get highest version tag for all branches
|
||||
function highest_tag(){
|
||||
local TAG=$(git tag --list 2>/dev/null | tail -n1 2>/dev/null)
|
||||
local TAG=$(git describe --tags `git rev-list --tags --max-count=1`)
|
||||
echo "$TAG"
|
||||
}
|
||||
|
||||
|
||||
1
.gitignore
vendored
@@ -10,3 +10,4 @@ coverage
|
||||
stats
|
||||
*.log
|
||||
packages/**/src/icons/*.js
|
||||
packages/**/src/icons/*.ts
|
||||
|
||||
45
README.md
@@ -9,9 +9,10 @@
|
||||
## What is Lucide?
|
||||
|
||||
Lucide is a community-run fork of [Feather Icons](https://github.com/feathericons/feather), open for anyone to contribute icons.
|
||||
Started after growing disaffection of the moderation of the [Feather Icons](https://github.com/feathericons/feather) project, with over 300+ open issues and over 100+ open PRs, this project is no longer maintained. The owner of the project stopped merging icons and want to keep the project like it now is. Hundreds of developers/designer wasted their time trying to contribute, what a shame.
|
||||
|
||||
We're trying to expanding the icon set as much as possible while keeping it nice-looking, we do it as a community of devs and designers, join us!
|
||||
It began after growing disaffection of the [Feather Icons](https://github.com/feathericons/feather) project moderation. With over 300+ open issues and over 100+ open PRs, the Feather Icons project has been abandoned. This unfortunately means that hundreds of developers and designers wasted their time contributing to Feather Icons with no chance of PRs being accepted.
|
||||
|
||||
Lucide is trying to expand the icon set as much as possible while staying faithful to the original simplistic design language. We do this as a community of devs and designers and hope that you'll join us!
|
||||
|
||||
### Why choose Lucide over Feather Icons
|
||||
|
||||
@@ -27,8 +28,10 @@ We're trying to expanding the icon set as much as possible while keeping it nice
|
||||
* [Usage](#usage)
|
||||
* [Web](#web)
|
||||
* [React](#react)
|
||||
* [Vue](#vue)
|
||||
* [Vue 2](#vue-2)
|
||||
* [Vue 3](#vue-3)
|
||||
* [Angular](#angular)
|
||||
* [Preact](#preact)
|
||||
* [Figma](#figma)
|
||||
* [Contributing](#contributing)
|
||||
* [Community](#community)
|
||||
@@ -36,7 +39,7 @@ We're trying to expanding the icon set as much as possible while keeping it nice
|
||||
|
||||
## Usage
|
||||
|
||||
At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Feather icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
|
||||
At its core, Lucide is a collection of [SVG](https://svgontheweb.com/#svg) files. This means that you can use Lucide icons in all the same ways you can use SVGs (e.g. `img`, `background-image`, `inline`, `object`, `embed`, `iframe`). Here's a helpful article detailing the many ways SVGs can be used on the web: [SVG on the Web – Implementation Options](https://svgontheweb.com/#implementation)
|
||||
|
||||
The following are additional ways you can use Lucide.
|
||||
With the Javascript library you can easily incorporate the icon you want in your webpage.
|
||||
@@ -53,7 +56,7 @@ npm install lucide
|
||||
yarn add lucide
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/blob/master/packages/lucide-react/README.md).
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide#lucide).
|
||||
|
||||
### React
|
||||
|
||||
@@ -69,7 +72,7 @@ npm install lucide-react
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-react#lucide-react).
|
||||
|
||||
### Vue
|
||||
### Vue 2
|
||||
|
||||
Implementation of the lucide icon library for vue applications.
|
||||
|
||||
@@ -83,6 +86,20 @@ npm install lucide-vue
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue).
|
||||
|
||||
### Vue 3
|
||||
|
||||
Implementation of the lucide icon library for vue applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue-next
|
||||
|
||||
# or
|
||||
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue-next#lucide-vue-next).
|
||||
|
||||
### Angular
|
||||
|
||||
```sh
|
||||
@@ -93,7 +110,21 @@ yarn add lucide-angular
|
||||
npm install lucide-angular
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular/projects/lucide-angular#lucide-angular).
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/packages/lucide-angular#lucide-angular).
|
||||
|
||||
### Preact
|
||||
|
||||
Implementation of the lucide icon library for preact applications.
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
|
||||
# or
|
||||
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
For more details, see the [documentation](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-preact#lucide-preact).
|
||||
|
||||
### Figma
|
||||
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
module.exports = {
|
||||
presets: ['@babel/env'],
|
||||
// babelrcRoots: ['.', './packages/*'],
|
||||
env: {
|
||||
test: {
|
||||
presets: ['@babel/env'],
|
||||
|
||||
16
icons/bell-ring.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" />
|
||||
<path d="M13.73 21a2 2 0 01-3.46 0" />
|
||||
<path d="M2 8c0-2.2.7-4.3 2-6" />
|
||||
<path d="M22 8a10 10 0 00-2-6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 378 B |
14
icons/check-circle-2.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" />
|
||||
<path d="M9 12l2 2 4-4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 325 B |
13
icons/chevrons-down-up.svg
Normal file
@@ -0,0 +1,13 @@
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M7 20l5-5 5 5" />
|
||||
<path d="M7 4l5 5 5-5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 243 B |
14
icons/chevrons-up-down.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg
|
||||
width="24"
|
||||
height="24"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M7 15l5 5 5-5" />
|
||||
<path d="M7 9l5-5 5 5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 265 B |
14
icons/circle-slashed.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M22 2L2 22" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 270 B |
15
icons/clipboard-check.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
|
||||
<path d="M15 2H9a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V3a1 1 0 00-1-1z" />
|
||||
<path d="M9 13l2 2 4-4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
16
icons/clipboard-copy.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M16 4h2a2 2 0 012 2v4M8 4H6a2 2 0 00-2 2v14a2 2 0 002 2h12a2 2 0 002-2v-2" />
|
||||
<rect x="8" y="2" width="8" height="4" rx="1" ry="1" />
|
||||
<path d="M21 14H11" />
|
||||
<path d="M15 10l-4 4 4 4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 411 B |
16
icons/clipboard-x.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M16 4h2a2 2 0 012 2v14a2 2 0 01-2 2H6a2 2 0 01-2-2V6a2 2 0 012-2h2" />
|
||||
<path d="M15 2H9a1 1 0 00-1 1v2a1 1 0 001 1h6a1 1 0 001-1V3a1 1 0 00-1-1z" />
|
||||
<path d="M15 11l-6 6" />
|
||||
<path d="M9 11l6 6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 422 B |
15
icons/cloud-fog.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M20 16.2A4.5 4.5 0 0017.5 8h-1.8A7 7 0 104 14.9" />
|
||||
<path d="M16 17L7 17" />
|
||||
<path d="M17 21L9 21" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 325 B |
14
icons/cloud-moon.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M13.63 22A3.3 3.3 0 0017 18.79a3.3 3.3 0 00-3.38-3.22h-1.34A5.23 5.23 0 007.25 12 5.13 5.13 0 002 17c0 2.76 2.35 5 5.25 5h6.38z" />
|
||||
<path d="M9.95 9a6.13 6.13 0 015.5-5.18 4.77 4.77 0 006.67 6.67A6.13 6.13 0 0119.46 15" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 444 B |
18
icons/cloud-sun.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M12 2v2" />
|
||||
<path d="M5.22 5.22l1.42 1.42" />
|
||||
<path d="M20 12h2" />
|
||||
<path d="M15.97 12.5A4 4 0 009.5 8.88" />
|
||||
<path d="M13.63 22A3.3 3.3 0 0017 18.79a3.3 3.3 0 00-3.38-3.22h-1.34A5.23 5.23 0 007.25 12 5.13 5.13 0 002 17c0 2.76 2.35 5 5.25 5h6.38z" />
|
||||
<path d="M17.36 6.64l1.42-1.42" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 515 B |
14
icons/cloudy.svg
Normal file
@@ -0,0 +1,14 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M17.5 21a4.5 4.5 0 100-9h-1.8A7 7 0 109 21h8.5z" />
|
||||
<path d="M22 10c0-1.5-1.5-3-3.5-3H17c-.7-2.3-2.9-4-5.4-4-2.7 0-5 2-5.5 4.5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 352 B |
16
icons/expand.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M21 21l-6-6m6 6v-4.8m0 4.8h-4.8" />
|
||||
<path d="M3 16.2V21m0 0h4.8M3 21l6-6" />
|
||||
<path d="M21 7.8V3m0 0h-4.8M21 3l-6 6" />
|
||||
<path d="M3 7.8V3m0 0h4.8M3 3l6 6" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 382 B |
16
icons/form-input.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<rect x="2" y="6" width="20" height="12" rx="2" />
|
||||
<path d="M12 12h.01" />
|
||||
<path d="M17 12h.01" />
|
||||
<path d="M7 12h.01" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
15
icons/ghost.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M9 10h.01" />
|
||||
<path d="M15 10h.01" />
|
||||
<path d="M12 2a8 8 0 00-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 00-8-8z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 349 B |
17
icons/glasses.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<circle cx="6" cy="15" r="4" />
|
||||
<circle cx="18" cy="15" r="4" />
|
||||
<path d="M14 15a2 2 0 00-2-2 2 2 0 00-2 2" />
|
||||
<path d="M2.5 13L5 7c.7-1.3 1.4-2 3-2" />
|
||||
<path d="M21.5 13L19 7c-.7-1.3-1.5-2-3-2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 416 B |
17
icons/monitor-speaker.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M5.5 20H8" />
|
||||
<path d="M17 9h.01" />
|
||||
<rect x="12" y="4" width="10" height="16" rx="2" />
|
||||
<path d="M8 6H4a2 2 0 00-2 2v6a2 2 0 002 2h4" />
|
||||
<circle cx="17" cy="15" r="1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 398 B |
15
icons/pause-octagon.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M10 15V9" />
|
||||
<path d="M14 15V9" />
|
||||
<path d="M7.714 2h8.572L22 7.714v8.572L16.286 22H7.714L2 16.286V7.714L7.714 2z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
16
icons/person-standing.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<circle cx="12" cy="5" r="1" />
|
||||
<path d="M9 20L12 14L15 20" />
|
||||
<path d="M6 8L12 10L18 8" />
|
||||
<path d="M12 10V14" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 331 B |
18
icons/plug-zap.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M13 2l-2 2.5h3L12 7" />
|
||||
<path d="M12 22v-3" />
|
||||
<path d="M10 13v-2.5" />
|
||||
<path d="M10 12.5v-2" />
|
||||
<path d="M14 12.5v-2" />
|
||||
<path d="M16 15a2 2 0 00-2-2h-4a2 2 0 00-2 2v2a2 2 0 002 2h4a2 2 0 002-2v-2z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
17
icons/scale.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M16 16l3-8 3.001 8A5.002 5.002 0 0116 16z" />
|
||||
<path d="M2 16l3-8 3.001 8A5.002 5.002 0 012 16z" />
|
||||
<path d="M7 21h10" />
|
||||
<path d="M12 3v18" />
|
||||
<path d="M3 7h2c2 0 5-1 7-2 2 1 5 2 7 2h2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 416 B |
@@ -9,6 +9,6 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M12.22 2h-.44a2 2 0 00-2 2v.18a2 2 0 01-1 1.73l-.43.25a2 2 0 01-2 0l-.15-.08a2 2 0 00-2.73.73l-.22.38a2 2 0 00.73 2.73l.15.1a2 2 0 011 1.72v.51a2 2 0 01-1 1.74l-.15.09a2 2 0 00-.73 2.73l.22.38a2 2 0 002.73.73l.15-.08a2 2 0 012 0l.43.25a2 2 0 011 1.73V20a2 2 0 002 2h.44a2 2 0 002-2v-.18a2 2 0 011-1.73l.43-.25a2 2 0 012 0l.15.08a2 2 0 002.73-.73l.22-.39a2 2 0 00-.73-2.73l-.15-.08a2 2 0 01-1-1.74v-.5a2 2 0 011-1.74l.15-.09a2 2 0 00.73-2.73l-.22-.38a2 2 0 00-2.73-.73l-.15.08a2 2 0 01-2 0l-.43-.25a2 2 0 01-1-1.73V4a2 2 0 00-2-2z" />
|
||||
<circle cx="12" cy="12" r="3" />
|
||||
<path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 010 2.83 2 2 0 01-2.83 0l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-2 2 2 2 0 01-2-2v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83 0 2 2 0 010-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 01-2-2 2 2 0 012-2h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 010-2.83 2 2 0 012.83 0l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 012-2 2 2 0 012 2v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 0 2 2 0 010 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 012 2 2 2 0 01-2 2h-.09a1.65 1.65 0 00-1.51 1z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 942 B After Width: | Height: | Size: 788 B |
16
icons/shrink.svg
Normal file
@@ -0,0 +1,16 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M15 15l6 6m-6-6v4.8m0-4.8h4.8" />
|
||||
<path d="M9 19.8V15m0 0H4.2M9 15l-6 6" />
|
||||
<path d="M15 4.2V9m0 0h4.8M15 9l6-6" />
|
||||
<path d="M9 4.2V9m0 0H4.2M9 9L3 3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 379 B |
15
icons/sidebar-close.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="9" y1="3" x2="9" y2="21" />
|
||||
<path d="M17 16L13 12L17 8" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
15
icons/sidebar-open.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
|
||||
<line x1="9" y1="3" x2="9" y2="21" />
|
||||
<path d="M13 8L17 12L13 16" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 341 B |
17
icons/skull.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<circle cx="9" cy="12" r="1" />
|
||||
<circle cx="15" cy="12" r="1" />
|
||||
<path d="M8 20v2h8v-2" />
|
||||
<path d="M12.5 17l-.5-1-.5 1h1z" />
|
||||
<path d="M16 20a2 2 0 001.56-3.25 8 8 0 10-11.12 0A2 2 0 008 20" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 413 B |
17
icons/tent.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M19 20L10 4" />
|
||||
<path d="M5 20l9-16" />
|
||||
<path d="M3 20h18" />
|
||||
<path d="M12 15l-3 5" />
|
||||
<path d="M12 15l3 5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 338 B |
18
icons/ticket.svg
Normal file
@@ -0,0 +1,18 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M3 9V7a2 2 0 012-2h14a2 2 0 012 2v2M3 15v2a2 2 0 002 2h14a2 2 0 002-2v-2" />
|
||||
<path d="M21 15a3 3 0 110-6" />
|
||||
<path d="M3 15a3 3 0 100-6" />
|
||||
<path d="M13 5v2" />
|
||||
<path d="M13 17v2" />
|
||||
<path d="M13 11v2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 434 B |
17
icons/tornado.svg
Normal file
@@ -0,0 +1,17 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M21 4H3" />
|
||||
<path d="M18 8H6" />
|
||||
<path d="M19 12H9" />
|
||||
<path d="M16 16h-6" />
|
||||
<path d="M11 20H9" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 327 B |
15
icons/vibrate.svg
Normal file
@@ -0,0 +1,15 @@
|
||||
<svg
|
||||
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"
|
||||
>
|
||||
<path d="M2 8l2 2-2 2 2 2-2 2" />
|
||||
<path d="M22 8l-2 2 2 2-2 2 2 2" />
|
||||
<rect x="8" y="5" width="8" height="14" rx="1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 334 B |
@@ -2,8 +2,7 @@
|
||||
"private": true,
|
||||
"workspaces": {
|
||||
"packages": [
|
||||
"packages/*",
|
||||
"site"
|
||||
"packages/*"
|
||||
],
|
||||
"nohoist": [
|
||||
"**/jest", "**/jest/**",
|
||||
@@ -16,12 +15,14 @@
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
"build": "yarn lucide build && yarn lucide-react build && yarn lucide-vue build",
|
||||
"build": "yarn lucide build && yarn lucide-react build && yarn lucide-preact build && yarn lucide-vue build && yarn lucide-vue-next build && yarn lucide-angular build",
|
||||
"test": "yarn lucide build:icons && yarn lucide-react build:icons && yarn lucide-vue build:icons && jest",
|
||||
"lucide": "yarn workspace lucide",
|
||||
"lucide-angular": "yarn workspace lucide-angular",
|
||||
"lucide-react": "yarn workspace lucide-react",
|
||||
"lucide-preact": "yarn workspace lucide-preact",
|
||||
"lucide-vue": "yarn workspace lucide-vue",
|
||||
"lucide-vue-next": "yarn workspace lucide-vue-next",
|
||||
"build:icons": "babel-node ./scripts/buildIcons.js --presets @babel/env",
|
||||
"optimize": "babel-node ./scripts/optimizeSvgs.js --presets @babel/env",
|
||||
"addtags": "babel-node ./scripts/addMissingKeysToTags.js --presets @babel/env",
|
||||
|
||||
2
packages/lucide-angular/.gitignore
vendored
@@ -48,4 +48,4 @@ Thumbs.db
|
||||
|
||||
#npm-yarn
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
src/createElement.js
|
||||
|
||||
15
packages/lucide-angular/LICENSE
Normal file
@@ -0,0 +1,15 @@
|
||||
ISC License
|
||||
|
||||
Copyright (c) 2020, Lucide Contributors
|
||||
|
||||
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.
|
||||
@@ -22,9 +22,9 @@ There are three ways for use this library.
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html` and `app.component.ts`.
|
||||
|
||||
``` xml
|
||||
``` html
|
||||
<!-- app.component.html -->
|
||||
<div id="ico"></div>
|
||||
<div id="lucide-icon"></div>
|
||||
```
|
||||
|
||||
``` js
|
||||
@@ -39,13 +39,16 @@ import { Activity } from 'lucide-angular/icons';
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent implements OnInit {
|
||||
|
||||
export class AppComponent implements OnInit {
|
||||
ngOnInit(): void {
|
||||
const div = document.getElementById('ico');
|
||||
const div = document.getElementById('lucide-icon');
|
||||
const elm = createElement(Activity);
|
||||
elm.setAttribute('color', 'red'); // or set `width`, `height`, `fill`, `stroke-width`, ...
|
||||
div.appendChild(elm);
|
||||
|
||||
if (div) {
|
||||
div.appendChild(elm);
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
@@ -61,8 +64,7 @@ import { BrowserModule } from '@angular/platform-browser';
|
||||
|
||||
import { AppRoutingModule } from './app-routing.module';
|
||||
import { AppComponent } from './app.component';
|
||||
import { LucideAngularModule } from 'lucide-angular';
|
||||
import { AlarmCheck, Edit } from 'lucide-angular/icons'; // or import other icons
|
||||
import { LucideAngularModule, AlarmCheck, Edit } from 'lucide-angular';
|
||||
|
||||
@NgModule({
|
||||
declarations: [
|
||||
@@ -79,37 +81,12 @@ import { AlarmCheck, Edit } from 'lucide-angular/icons'; // or import other ico
|
||||
export class AppModule { }
|
||||
```
|
||||
|
||||
``` css
|
||||
/* app.component.css */
|
||||
.myicon {
|
||||
/* Be sure to set these values */
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
/* or other properties like `color`, `fill`, `stroke-width` */
|
||||
}
|
||||
```
|
||||
|
||||
``` xml
|
||||
``` html
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon name="alarm-check" class="myicon"></lucide-icon>
|
||||
<lucide-icon name="edit" class="myicon"></lucide-icon>
|
||||
```
|
||||
|
||||
``` js
|
||||
// app.component.ts
|
||||
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
export class AppComponent {
|
||||
|
||||
}
|
||||
```
|
||||
|
||||
### Method 3: User __Tag__ with __img__ property
|
||||
|
||||
After install `lucide-angular` change content of file `app.component.html`, `app.component.ts`, `app.component.css` and `app.module.ts`.
|
||||
@@ -138,16 +115,6 @@ import { LucideAngularModule } from 'lucide-angular';
|
||||
export class AppModule { }
|
||||
```
|
||||
|
||||
``` css
|
||||
/* app.component.css */
|
||||
.myicon {
|
||||
/* Be sure to set these values */
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
/* or other properties like `color`, `fill`, `stroke-width` */
|
||||
}
|
||||
```
|
||||
|
||||
``` xml
|
||||
<!-- app.component.html -->
|
||||
<lucide-icon [img]="ico1" class="myicon"></lucide-icon>
|
||||
@@ -157,13 +124,14 @@ export class AppModule { }
|
||||
``` js
|
||||
// app.component.ts
|
||||
import { Component } from '@angular/core';
|
||||
import { Airplay, Circle } from 'lucide-angular/icons';
|
||||
import { Airplay, Circle } from 'lucide-angular';
|
||||
|
||||
@Component({
|
||||
selector: 'app-root',
|
||||
templateUrl: './app.component.html',
|
||||
styleUrls: ['./app.component.css']
|
||||
})
|
||||
|
||||
export class AppComponent {
|
||||
ico1 = Airplay;
|
||||
ico2 = Circle;
|
||||
@@ -175,6 +143,7 @@ export class AppComponent {
|
||||
### Import all icons
|
||||
|
||||
In `Method 2`: import all icons in `app.module.ts` by:
|
||||
|
||||
``` js
|
||||
...
|
||||
import { icons } from 'lucide-angular/icons';
|
||||
@@ -182,10 +151,13 @@ import { icons } from 'lucide-angular/icons';
|
||||
LucideAngularModule.pick(icons)
|
||||
....
|
||||
```
|
||||
|
||||
### Tags
|
||||
|
||||
You can use the following tags instead of `lucide-icon`:
|
||||
* lucide-angular
|
||||
* i-lucide
|
||||
* span-lucide
|
||||
|
||||
- lucide-angular
|
||||
- i-lucide
|
||||
- span-lucide
|
||||
|
||||
All of the above are the same
|
||||
@@ -1,40 +1,40 @@
|
||||
{
|
||||
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
|
||||
"$schema": "../../node_modules/@angular/cli/lib/config/schema.json",
|
||||
"version": 1,
|
||||
"newProjectRoot": "projects",
|
||||
"newProjectRoot": "",
|
||||
"projects": {
|
||||
"lucide-angular": {
|
||||
"projectType": "library",
|
||||
"root": "projects/lucide-angular",
|
||||
"sourceRoot": "projects/lucide-angular/src",
|
||||
"root": "",
|
||||
"sourceRoot": "src",
|
||||
"prefix": "lib",
|
||||
"architect": {
|
||||
"build": {
|
||||
"builder": "@angular-devkit/build-angular:ng-packagr",
|
||||
"options": {
|
||||
"tsConfig": "projects/lucide-angular/tsconfig.lib.json",
|
||||
"project": "projects/lucide-angular/ng-package.json"
|
||||
"tsConfig": "tsconfig.lib.json",
|
||||
"project": "ng-package.json"
|
||||
},
|
||||
"configurations": {
|
||||
"production": {
|
||||
"tsConfig": "projects/lucide-angular/tsconfig.lib.prod.json"
|
||||
"tsConfig": "tsconfig.lib.prod.json"
|
||||
}
|
||||
}
|
||||
},
|
||||
"test": {
|
||||
"builder": "@angular-devkit/build-angular:karma",
|
||||
"options": {
|
||||
"main": "projects/lucide-angular/src/test.ts",
|
||||
"tsConfig": "projects/lucide-angular/tsconfig.spec.json",
|
||||
"karmaConfig": "projects/lucide-angular/karma.conf.js"
|
||||
"main": "src/test.ts",
|
||||
"tsConfig": "tsconfig.spec.json",
|
||||
"karmaConfig": "karma.conf.js"
|
||||
}
|
||||
},
|
||||
"lint": {
|
||||
"builder": "@angular-devkit/build-angular:tslint",
|
||||
"options": {
|
||||
"tsConfig": [
|
||||
"projects/lucide-angular/tsconfig.lib.json",
|
||||
"projects/lucide-angular/tsconfig.spec.json"
|
||||
"tsconfig.lib.json",
|
||||
"tsconfig.spec.json"
|
||||
],
|
||||
"exclude": [
|
||||
"**/node_modules/**"
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
/* eslint-disable import/no-extraneous-dependencies, global-require, func-names */
|
||||
// Karma configuration file, see link for more information
|
||||
// https://karma-runner.github.io/1.0/config/configuration-file.html
|
||||
process.env.CHROME_BIN = require('puppeteer').executablePath();
|
||||
|
||||
module.exports = function (config) {
|
||||
module.exports = function(config) {
|
||||
config.set({
|
||||
basePath: '',
|
||||
frameworks: ['jasmine', '@angular-devkit/build-angular'],
|
||||
@@ -11,7 +12,7 @@ module.exports = function (config) {
|
||||
require('karma-chrome-launcher'),
|
||||
require('karma-jasmine-html-reporter'),
|
||||
require('karma-coverage'),
|
||||
require('@angular-devkit/build-angular/plugins/karma')
|
||||
require('@angular-devkit/build-angular/plugins/karma'),
|
||||
],
|
||||
client: {
|
||||
jasmine: {
|
||||
@@ -20,18 +21,15 @@ module.exports = function (config) {
|
||||
// for example, you can disable the random execution with `random: false`
|
||||
// or set a specific seed with `seed: 4321`
|
||||
},
|
||||
clearContext: false // leave Jasmine Spec Runner output visible in browser
|
||||
clearContext: false, // leave Jasmine Spec Runner output visible in browser
|
||||
},
|
||||
jasmineHtmlReporter: {
|
||||
suppressAll: true // removes the duplicated traces
|
||||
suppressAll: true, // removes the duplicated traces
|
||||
},
|
||||
coverageReporter: {
|
||||
dir: require('path').join(__dirname, '../../coverage/lucide-angular'),
|
||||
subdir: '.',
|
||||
reporters: [
|
||||
{ type: 'html' },
|
||||
{ type: 'text-summary' }
|
||||
]
|
||||
reporters: [{ type: 'html' }, { type: 'text-summary' }],
|
||||
},
|
||||
reporters: ['progress', 'kjhtml'],
|
||||
port: 9876,
|
||||
@@ -42,10 +40,10 @@ module.exports = function (config) {
|
||||
customLaunchers: {
|
||||
ChromeHeadlessCI: {
|
||||
base: 'ChromeHeadless',
|
||||
flags: ['--no-sandbox']
|
||||
}
|
||||
flags: ['--no-sandbox'],
|
||||
},
|
||||
},
|
||||
singleRun: false,
|
||||
restartOnFileChange: true
|
||||
restartOnFileChange: true,
|
||||
});
|
||||
};
|
||||
7
packages/lucide-angular/ng-package.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"$schema": "./node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "dist",
|
||||
"lib": {
|
||||
"entryFile": "src/index.ts"
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-angular",
|
||||
"description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
|
||||
"version": "0.15.0",
|
||||
"version": "0.15.19",
|
||||
"author": "SMAH1",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
@@ -9,7 +9,7 @@
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/lucide-icons/lucide.git",
|
||||
"directory": "packages/lucide-vue"
|
||||
"directory": "packages/lucide-angular"
|
||||
},
|
||||
"keywords": [
|
||||
"Lucide",
|
||||
@@ -22,29 +22,32 @@
|
||||
"Font Awesome"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "yarn clean && yarn build:js && yarn build:icons && yarn build:iconsindex && yarn build:ng",
|
||||
"clean": "rm -rf dist && rm -rf projects/lucide-angular/build",
|
||||
"build:js": "mkdir -p projects/lucide-angular/build && cp -av ../lucide/src/createElement.js projects/lucide-angular/build/",
|
||||
"build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-angular/projects/lucide-angular/build --templateSrc=../packages/lucide-angular/scripts/exportTemplate && for f in projects/lucide-angular/build/icons/*.js; do mv -- \"$f\" \"${f%.js}.ts\"; done",
|
||||
"build:iconsindex": "yarn --cwd ../../ babel-node packages/lucide-angular/scripts/buildIconsIndex.js",
|
||||
"build": "yarn clean && yarn build:icons && yarn build:ng",
|
||||
"clean": "rm -rf dist && rm -rf ./src/icons/*.ts",
|
||||
"build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-angular/src --templateSrc=../packages/lucide-angular/scripts/exportTemplate --iconFileExtention=.ts --exportFileName=index.ts",
|
||||
"build:ng": "ng build --prod",
|
||||
"test:headless": "ng test --no-watch --no-progress --browsers=ChromeHeadlessCI",
|
||||
"test": "ng test",
|
||||
"lint": "ng lint",
|
||||
"e2e": "ng e2e"
|
||||
"e2e": "ng e2e",
|
||||
"postinstall": "ngcc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@angular/common": "~11.2.6",
|
||||
"@angular/compiler": "~11.2.6",
|
||||
"@angular/core": "~11.2.6",
|
||||
"@angular/platform-browser": "~11.2.6",
|
||||
"@angular/platform-browser-dynamic": "~11.2.6",
|
||||
"tslib": "^2.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^11.2.6",
|
||||
"@angular/core": "^11.2.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@angular-devkit/build-angular": "~0.1102.5",
|
||||
"@angular/cli": "~11.2.5",
|
||||
"@angular/common": "~11.2.6",
|
||||
"@angular/compiler": "~11.2.6",
|
||||
"@angular/compiler-cli": "~11.2.6",
|
||||
"@angular/core": "~11.2.6",
|
||||
"@angular/platform-browser": "~11.2.6",
|
||||
"@angular/platform-browser-dynamic": "~11.2.6",
|
||||
"@types/jasmine": "~3.6.0",
|
||||
"@types/node": "^12.11.1",
|
||||
"codelyzer": "^6.0.0",
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
export * from './build/icons-index';
|
||||
|
||||
import * as icons from './build/icons-index';
|
||||
export { icons };
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"ngPackage": {
|
||||
"lib": {
|
||||
"entryFile": "../icons-index.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +0,0 @@
|
||||
|
||||
export * from './src/lib/lucide-angular.component';
|
||||
export * from './src/lib/lucide-angular.module';
|
||||
export * from './lucide';
|
||||
@@ -1,10 +0,0 @@
|
||||
export type IconNode = readonly [string, object];
|
||||
export type IconData = readonly [string, object, IconNode[] ];
|
||||
|
||||
export declare const icons: { [key: string]: IconData };
|
||||
|
||||
import { default as createElementTmp } from './build/createElement';
|
||||
|
||||
export function createElement(ico: IconData): HTMLElement {
|
||||
return createElementTmp(ico as any);
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
|
||||
"dest": "../../dist/lucide-angular",
|
||||
"lib": {
|
||||
"entryFile": "./lib-index.ts"
|
||||
}
|
||||
}
|
||||
@@ -1,31 +0,0 @@
|
||||
{
|
||||
"name": "lucide-angular",
|
||||
"description": "Lucide Angular package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
|
||||
"version": "0.15.0",
|
||||
"author": "SMAH1",
|
||||
"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",
|
||||
"Angular",
|
||||
"Feather",
|
||||
"Icons",
|
||||
"Icon",
|
||||
"Feather Icons",
|
||||
"Fontawesome",
|
||||
"Font Awesome"
|
||||
],
|
||||
"peerDependencies": {
|
||||
"@angular/common": "^11.2.6",
|
||||
"@angular/core": "^11.2.6"
|
||||
},
|
||||
"dependencies": {
|
||||
"tslib": "^2.0.0"
|
||||
}
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
{
|
||||
"extends": "../../tslint.json",
|
||||
"rules": {
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"lib",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"",
|
||||
"kebab-case"
|
||||
]
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
import path from 'path';
|
||||
|
||||
import {
|
||||
writeFile,
|
||||
resetFile,
|
||||
appendFile,
|
||||
readSvgDirectory,
|
||||
} from '../../../scripts/helpers';
|
||||
|
||||
const TARGET_DIR = path.join(__dirname, '../projects/lucide-angular/build');
|
||||
const ICONS_DIR = path.resolve(__dirname, '../../../icons');
|
||||
const TYPES_FILE_NAME = 'icons-index.ts';
|
||||
|
||||
// Generates header of d.ts file include some types and functions
|
||||
const typeDefinitions = `\
|
||||
export type IconNode = readonly [string, object];
|
||||
export type IconData = readonly [string, object, IconNode[] ];
|
||||
|
||||
export declare const icons: { [key: string]: IconData };
|
||||
|
||||
// Generated icons
|
||||
`;
|
||||
|
||||
resetFile(TYPES_FILE_NAME, TARGET_DIR);
|
||||
writeFile(typeDefinitions, TYPES_FILE_NAME, TARGET_DIR);
|
||||
|
||||
const svgFiles = readSvgDirectory(ICONS_DIR);
|
||||
|
||||
svgFiles.forEach(svgFile => {
|
||||
const kebab = path.basename(svgFile, '.svg');
|
||||
|
||||
appendFile(
|
||||
`export * from './icons/${kebab}';\n`,
|
||||
TYPES_FILE_NAME,
|
||||
TARGET_DIR,
|
||||
);
|
||||
});
|
||||
|
||||
console.log(`Generated ${TYPES_FILE_NAME} file with`, svgFiles.length, 'icons');
|
||||
@@ -1,10 +1,12 @@
|
||||
export default ({ componentName, children }) => `
|
||||
import { IconData } from '../../lucide';
|
||||
import defaultAttributes from '../../default-attributes';
|
||||
import { IconData } from './types';
|
||||
import defaultAttributes from './constants/default-attributes';
|
||||
|
||||
export const ${componentName}: IconData = [
|
||||
const ${componentName}: IconData = [
|
||||
'svg',
|
||||
defaultAttributes,
|
||||
${JSON.stringify(children)}
|
||||
];
|
||||
|
||||
export default ${componentName};
|
||||
`;
|
||||
|
||||
26
packages/lucide-angular/src/helpers/create-element.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { IconData } from '../icons/types'
|
||||
|
||||
/**
|
||||
* Creates a new SVGElement from icon node
|
||||
* @param {string} tag
|
||||
* @param {object} attrs
|
||||
* @param {array} children
|
||||
* @returns {SVGElement}
|
||||
*/
|
||||
export const createElement = ([tag, attrs, children = []]: IconData): SVGElement => {
|
||||
const element = document.createElementNS('http://www.w3.org/2000/svg', tag);
|
||||
|
||||
Object.keys(attrs).forEach(name => {
|
||||
element.setAttribute(name, attrs[name]);
|
||||
});
|
||||
|
||||
if (children.length) {
|
||||
children.forEach((child: IconData) => {
|
||||
const childElement = createElement(child);
|
||||
|
||||
element.appendChild(childElement);
|
||||
});
|
||||
}
|
||||
|
||||
return element;
|
||||
};
|
||||
8
packages/lucide-angular/src/icons/package.json
Normal file
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"ngPackage": {
|
||||
"dest": "dist",
|
||||
"lib": {
|
||||
"entryFile": "./index.ts"
|
||||
}
|
||||
}
|
||||
}
|
||||
3
packages/lucide-angular/src/icons/types/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export type IconNode = readonly [string, object];
|
||||
export type IconData = readonly [string, object, IconNode[]? ];
|
||||
export type Icons = { [key: string]: IconData }
|
||||
7
packages/lucide-angular/src/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import * as icons from './icons';
|
||||
|
||||
export * from './lib/lucide-angular.component';
|
||||
export * from './lib/lucide-angular.module';
|
||||
export * from './helpers/create-element';
|
||||
export * from './icons';
|
||||
export { icons };
|
||||
@@ -1,3 +1,3 @@
|
||||
export class Icons {
|
||||
constructor(private icons: object) {}
|
||||
}
|
||||
export class Icons {
|
||||
constructor(private icons: object) {}
|
||||
}
|
||||
@@ -1,6 +1,5 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
import { LucideAngularModule } from './lucide-angular.module';
|
||||
|
||||
import { LucideAngularComponent } from './lucide-angular.component';
|
||||
|
||||
describe('LucideAngularComponent', () => {
|
||||
@@ -1,6 +1,7 @@
|
||||
import { Component, ElementRef, Input, Inject, ChangeDetectorRef, OnChanges, SimpleChanges } from '@angular/core';
|
||||
import { Icons } from './icons.provider';
|
||||
import { createElement, IconData } from '../../lucide';
|
||||
import { IconData } from '../icons/types';
|
||||
import { createElement } from '../helpers/create-element';
|
||||
|
||||
@Component({
|
||||
selector: 'lucide-angular, lucide-icon, i-lucide, span-lucide',
|
||||
@@ -9,13 +10,16 @@ import { createElement, IconData } from '../../lucide';
|
||||
:host {
|
||||
display: inline-block;
|
||||
fill: none;
|
||||
stroke: inherit;
|
||||
stroke-width: inherit;
|
||||
stroke: currentColor;
|
||||
stroke-width: 2;
|
||||
stroke-linecap: round;
|
||||
stroke-linejoin: round;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
`]
|
||||
})
|
||||
|
||||
export class LucideAngularComponent implements OnChanges {
|
||||
@Input() name!: string;
|
||||
@Input() img!: IconData;
|
||||
@@ -1,12 +1,15 @@
|
||||
import { NgModule, ModuleWithProviders, Optional } from '@angular/core';
|
||||
import { LucideAngularComponent } from './lucide-angular.component';
|
||||
import { Icons } from './icons.provider';
|
||||
import { IconData } from '../../lucide';
|
||||
import { IconData } from '../icons/types';
|
||||
|
||||
@NgModule({
|
||||
declarations: [LucideAngularComponent],
|
||||
imports: [
|
||||
],
|
||||
exports: [LucideAngularComponent]
|
||||
})
|
||||
|
||||
export class LucideAngularModule {
|
||||
constructor(@Optional() private icons: Icons) {
|
||||
if (!this.icons) {
|
||||
@@ -9,12 +9,13 @@
|
||||
"downlevelIteration": true,
|
||||
"emitDecoratorMetadata": true,
|
||||
"experimentalDecorators": true,
|
||||
"allowJs": true,
|
||||
"paths": {
|
||||
"lucide-angular": [
|
||||
"dist/lucide-angular/lucide-angular",
|
||||
"dist/lucide-angular"
|
||||
]
|
||||
"dist"
|
||||
],
|
||||
"lucide-angular/*": [
|
||||
"dist/*"
|
||||
],
|
||||
},
|
||||
"moduleResolution": "node",
|
||||
"importHelpers": true,
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/lib",
|
||||
"outDir": "./out-tsc/lib",
|
||||
"target": "es2015",
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
@@ -17,7 +17,8 @@
|
||||
"angularCompilerOptions": {
|
||||
"skipTemplateCodegen": true,
|
||||
"strictMetadataEmit": true,
|
||||
"enableResourceInlining": true
|
||||
"enableResourceInlining": true,
|
||||
"fullTemplateTypeCheck": true
|
||||
},
|
||||
"exclude": [
|
||||
"src/test.ts",
|
||||
@@ -1,8 +1,8 @@
|
||||
/* To learn more about this file see: https://angular.io/config/tsconfig. */
|
||||
{
|
||||
"extends": "../../tsconfig.json",
|
||||
"extends": "./tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "../../out-tsc/spec",
|
||||
"outDir": "./out-tsc/spec",
|
||||
"types": [
|
||||
"jasmine"
|
||||
]
|
||||
@@ -16,6 +16,18 @@
|
||||
"deprecation": {
|
||||
"severity": "warning"
|
||||
},
|
||||
"directive-selector": [
|
||||
true,
|
||||
"attribute",
|
||||
"lib",
|
||||
"camelCase"
|
||||
],
|
||||
"component-selector": [
|
||||
true,
|
||||
"element",
|
||||
"",
|
||||
"kebab-case"
|
||||
],
|
||||
"eofline": true,
|
||||
"import-blacklist": [
|
||||
true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "lucide-figma",
|
||||
"version": "0.15.0",
|
||||
"version": "0.15.11",
|
||||
"license": "ISC",
|
||||
"private": true,
|
||||
"main": "build/ui.js",
|
||||
@@ -15,7 +15,7 @@
|
||||
"css-loader": "^3.0.0",
|
||||
"html-webpack-inline-source-plugin": "^0.0.10",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"lucide-react": "^0.15.0",
|
||||
"lucide-react": "0.15.11",
|
||||
"react": "^16.8.6",
|
||||
"react-dom": "^16.8.6",
|
||||
"style-loader": "^0.23.1",
|
||||
|
||||
@@ -2054,9 +2054,9 @@ locate-path@^3.0.0:
|
||||
path-exists "^3.0.0"
|
||||
|
||||
lodash@^4.17.19, lodash@^4.17.20, lodash@^4.17.3:
|
||||
version "4.17.20"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52"
|
||||
integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA==
|
||||
version "4.17.21"
|
||||
resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
|
||||
integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
|
||||
|
||||
loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
@@ -2077,13 +2077,13 @@ lru-cache@^5.1.1:
|
||||
dependencies:
|
||||
yallist "^3.0.2"
|
||||
|
||||
lucide-react@^0.13.0:
|
||||
version "0.13.0"
|
||||
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.13.0.tgz#7bcc60f85c207b9eed6f4a6c713dfdcb5928d2b3"
|
||||
integrity sha512-4BmILrkeydq8YhHjDRe9qKd42nsog77ZW/bgqy3A56d9pV5v3/2a2gK8qDbAAwpYZva+MIhOTRWpJW8BgtQGUA==
|
||||
lucide-react@0.15.11:
|
||||
version "0.15.11"
|
||||
resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.15.11.tgz#34f2d76d1e7fda978f4a8b2d0538b84ecbecf106"
|
||||
integrity sha512-2NOpAVt2ScBkwlRvub7adfmWZX1o+so+3elAtyp5g9jaAKthszAgKZwNEFhB2Gl1tT5CuvVLPsjaRjhnpNjq9w==
|
||||
dependencies:
|
||||
prop-types "^15.7.2"
|
||||
react "^17.0.1"
|
||||
react "^16.5.1"
|
||||
|
||||
make-dir@^2.0.0:
|
||||
version "2.1.0"
|
||||
@@ -2723,7 +2723,7 @@ react-is@^16.8.1:
|
||||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
react@^16.8.6:
|
||||
react@^16.5.1, react@^16.8.6:
|
||||
version "16.14.0"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
|
||||
integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
|
||||
@@ -2732,14 +2732,6 @@ react@^16.8.6:
|
||||
object-assign "^4.1.1"
|
||||
prop-types "^15.6.2"
|
||||
|
||||
react@^17.0.1:
|
||||
version "17.0.1"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
|
||||
integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
|
||||
dependencies:
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
|
||||
version "2.3.7"
|
||||
resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
|
||||
@@ -3084,9 +3076,9 @@ split-string@^3.0.1, split-string@^3.0.2:
|
||||
extend-shallow "^3.0.0"
|
||||
|
||||
ssri@^6.0.1:
|
||||
version "6.0.1"
|
||||
resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.1.tgz#2a3c41b28dd45b62b63676ecb74001265ae9edd8"
|
||||
integrity sha512-3Wge10hNcT1Kur4PDFwEieXSCMCJs/7WvSACcrMYrNp+b8kDL1/0wJch5Ni2WrtwEa2IO8OsVfeKIciKCDx/QA==
|
||||
version "6.0.2"
|
||||
resolved "https://registry.yarnpkg.com/ssri/-/ssri-6.0.2.tgz#157939134f20464e7301ddba3e90ffa8f7728ac5"
|
||||
integrity sha512-cepbSq/neFK7xB6A50KHN0xHDotYzq58wWCa5LeWqnPrHG8GzfEjO/4O8kpmcGW+oaxkvhEJCWgbgNk4/ZV93Q==
|
||||
dependencies:
|
||||
figgy-pudding "^3.5.1"
|
||||
|
||||
|
||||
9
packages/lucide-preact/.npmignore
Normal file
@@ -0,0 +1,9 @@
|
||||
stats
|
||||
node_modules
|
||||
tests
|
||||
scripts
|
||||
build
|
||||
src
|
||||
babel.config.js
|
||||
jest.config.js
|
||||
rollup.config.js
|
||||
15
packages/lucide-preact/LICENSE
Normal file
@@ -0,0 +1,15 @@
|
||||
ISC License
|
||||
|
||||
Copyright (c) 2020, Lucide Contributors
|
||||
|
||||
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.
|
||||
77
packages/lucide-preact/README.md
Normal file
@@ -0,0 +1,77 @@
|
||||
# Lucide Preact
|
||||
|
||||
Implementation of the lucide icon library for preact applications.
|
||||
|
||||
> What is lucide? Read it [here](https://github.com/lucide-icons/lucide#what-is-lucide).
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add lucide-preact
|
||||
|
||||
# or
|
||||
|
||||
npm install lucide-preact
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
Each icon can be imported as a preact component.
|
||||
|
||||
### Example
|
||||
|
||||
You can pass additional props to adjust the icon.
|
||||
|
||||
``` js
|
||||
import { Camera } from 'lucide-preact';
|
||||
// Returns PreactComponent
|
||||
|
||||
// Usage
|
||||
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 / svg attributes
|
||||
|
||||
You can also pass custom props that will be added in the as attributes. With that you can modify the icons look by passing svg attributes.
|
||||
|
||||
``` js
|
||||
// Usage
|
||||
const App = () => {
|
||||
return <Camera fill="red" stroke-linejoin="bevel"/>
|
||||
};
|
||||
```
|
||||
|
||||
> svg attributes in preact aren't transformed, so if want to change e.g. the `stroke-linejoin` you need to pass it in kebabcase, the way svg spec is written so. See this topic in the [preact documentation](https://preactjs.com/guide/v10/differences-to-react/#svg-inside-jsx).
|
||||
|
||||
### 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
|
||||
|
||||
``` js
|
||||
import * as icons from 'lucide-preact';
|
||||
|
||||
const Icon = ({name, color, size}) => {
|
||||
const LucideIcon = icons[name];
|
||||
|
||||
return <LucideIcon color={color} size={size} />
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
```
|
||||
6
packages/lucide-preact/babel.config.js
Normal file
@@ -0,0 +1,6 @@
|
||||
const mainConfig = require('../../babel.config');
|
||||
|
||||
module.exports = {
|
||||
presets: ['preact'],
|
||||
env: mainConfig.env,
|
||||
};
|
||||
9
packages/lucide-preact/jest.config.js
Normal file
@@ -0,0 +1,9 @@
|
||||
module.exports = {
|
||||
verbose: true,
|
||||
roots: ['<rootDir>/src/', '<rootDir>/tests/'],
|
||||
moduleFileExtensions: ['js'],
|
||||
transformIgnorePatterns: [`/node_modules`],
|
||||
transform: {
|
||||
'^.+\\.js$': 'babel-jest',
|
||||
},
|
||||
};
|
||||
39
packages/lucide-preact/package.json
Normal file
@@ -0,0 +1,39 @@
|
||||
{
|
||||
"name": "lucide-preact",
|
||||
"description": "Lucide Preact package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
|
||||
"version": "0.15.19",
|
||||
"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-preact"
|
||||
},
|
||||
"author": "Eric Fennis",
|
||||
"amdName": "lucide-preact",
|
||||
"main": "dist/cjs/lucide-preact.js",
|
||||
"main:umd": "dist/umd/lucide-preact.js",
|
||||
"module": "dist/esm/lucide-preact.js",
|
||||
"unpkg": "dist/umd/lucide-preact.min.js",
|
||||
"typings": "dist/lucide-preact.d.ts",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
|
||||
"build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-preact/src --templateSrc=../packages/lucide-preact/scripts/exportTemplate --renderUniqueKey",
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:types": "yarn --cwd ../../ babel-node packages/lucide-preact/scripts/buildTypes.js",
|
||||
"build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-preact/rollup.config.js",
|
||||
"test": "jest"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/preact": "^2.0.1",
|
||||
"babel-preset-preact": "^2.0.0",
|
||||
"jest": "^26.6.3",
|
||||
"preact": "^10.5.13"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"preact": "^10.5.13"
|
||||
}
|
||||
}
|
||||
48
packages/lucide-preact/rollup.config.js
Normal file
@@ -0,0 +1,48 @@
|
||||
import plugins from '../../rollup.plugins';
|
||||
import pkg from './package.json';
|
||||
|
||||
const packageName = 'LucidePreact';
|
||||
const outputFileName = 'lucide-preact';
|
||||
const rootDir = 'packages/lucide-preact'; // It runs from the root
|
||||
const outputDir = `${rootDir}/dist`;
|
||||
const inputs = [`${rootDir}/src/lucide-preact.js`];
|
||||
const bundles = [
|
||||
{
|
||||
format: 'umd',
|
||||
inputs,
|
||||
outputDir,
|
||||
minify: true,
|
||||
},
|
||||
{
|
||||
format: 'umd',
|
||||
inputs,
|
||||
outputDir,
|
||||
},
|
||||
{
|
||||
format: 'cjs',
|
||||
inputs,
|
||||
outputDir,
|
||||
},
|
||||
];
|
||||
|
||||
const configs = bundles
|
||||
.map(({ inputs, outputDir, format, minify }) =>
|
||||
inputs.map(input => ({
|
||||
input,
|
||||
plugins: plugins(pkg, minify),
|
||||
external: ['preact', 'prop-types', 'lucide'],
|
||||
output: {
|
||||
name: packageName,
|
||||
file: `${outputDir}/${format}/${outputFileName}${minify ? '.min' : ''}.js`,
|
||||
format,
|
||||
sourcemap: true,
|
||||
globals: {
|
||||
preact: 'preact',
|
||||
'prop-types': 'PropTypes',
|
||||
},
|
||||
},
|
||||
})),
|
||||
)
|
||||
.flat();
|
||||
|
||||
export default configs;
|
||||
43
packages/lucide-preact/scripts/buildTypes.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import path from 'path';
|
||||
import {
|
||||
writeFile,
|
||||
readSvgDirectory,
|
||||
resetFile,
|
||||
toPascalCase,
|
||||
appendFile,
|
||||
} from '../../../scripts/helpers';
|
||||
|
||||
const srcDirectory = path.join(__dirname, '../dist');
|
||||
|
||||
// Declare type definitions
|
||||
const typeDefinitions = `\
|
||||
/// <reference types="preact" />
|
||||
import { JSX, RefObject } from 'preact'
|
||||
|
||||
interface LucideProps extends Partial<Omit<JSX.SVGAttributes, "ref" | "size">> {
|
||||
key?: string | number;
|
||||
ref?: string | ((component: any) => any) | RefObject<any>;
|
||||
color?: string
|
||||
size?: string | number
|
||||
}
|
||||
|
||||
// Generated icons
|
||||
`;
|
||||
|
||||
const ICONS_DIR = path.resolve(__dirname, '../../../icons');
|
||||
const TYPES_FILE = 'lucide-preact.d.ts';
|
||||
|
||||
resetFile(TYPES_FILE, srcDirectory);
|
||||
writeFile(typeDefinitions, TYPES_FILE, srcDirectory);
|
||||
|
||||
const svgFiles = readSvgDirectory(ICONS_DIR);
|
||||
|
||||
svgFiles.forEach(svgFile => {
|
||||
const iconName = path.basename(svgFile, '.svg');
|
||||
const componentName = toPascalCase(iconName);
|
||||
|
||||
const exportTypeString = `export declare const ${componentName}: (props: LucideProps) => JSX.Element;\n`;
|
||||
appendFile(exportTypeString, TYPES_FILE, srcDirectory);
|
||||
});
|
||||
|
||||
console.log(`Generated ${TYPES_FILE} file with`, svgFiles.length, 'icons');
|
||||
7
packages/lucide-preact/scripts/exportTemplate.js
Normal file
@@ -0,0 +1,7 @@
|
||||
export default ({ componentName, children }) => `
|
||||
import createPreactComponent from '../createPreactComponent';
|
||||
|
||||
const ${componentName} = createPreactComponent('${componentName}', ${JSON.stringify(children)});
|
||||
|
||||
export default ${componentName};
|
||||
`;
|
||||
22
packages/lucide-preact/src/createPreactComponent.js
Normal file
@@ -0,0 +1,22 @@
|
||||
import { h } from 'preact';
|
||||
import defaultAttributes from './defaultAttributes';
|
||||
|
||||
export default (iconName, iconNode) => {
|
||||
const Component = ({ color = 'currentColor', size = 24, strokeWidth = 2, ...rest }) =>
|
||||
h(
|
||||
'svg',
|
||||
{
|
||||
...defaultAttributes,
|
||||
width: size,
|
||||
height: size,
|
||||
stroke: color,
|
||||
'stroke-width': strokeWidth,
|
||||
...rest,
|
||||
},
|
||||
iconNode.map(([tag, attrs]) => h(tag, attrs)),
|
||||
);
|
||||
|
||||
Component.displayName = `${iconName}`;
|
||||
|
||||
return Component;
|
||||
};
|
||||
11
packages/lucide-preact/src/defaultAttributes.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export default {
|
||||
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',
|
||||
};
|
||||
1
packages/lucide-preact/src/icons/.gitkeep
Normal file
@@ -0,0 +1 @@
|
||||
Folder for generated icons
|
||||
1
packages/lucide-preact/src/lucide-preact.js
Normal file
@@ -0,0 +1 @@
|
||||
export * from './icons';
|
||||
@@ -0,0 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
|
||||
|
||||
exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
|
||||
30
packages/lucide-preact/tests/lucide-preact.spec.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import { h } from 'preact'
|
||||
import { render } from '@testing-library/preact'
|
||||
import { Grid } from '../src/icons'
|
||||
|
||||
describe('Using lucide icon components', () => {
|
||||
it('should render an component', () => {
|
||||
const { container } = render( <Grid/> );
|
||||
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should adjust the size, stroke color and stroke width', () => {
|
||||
const testId = 'grid-icon';
|
||||
const { container, getByTestId } = render(
|
||||
<Grid
|
||||
data-testid={testId}
|
||||
size={48}
|
||||
stroke="red"
|
||||
strokeWidth={4}
|
||||
/>,
|
||||
);
|
||||
|
||||
const { attributes } = getByTestId(testId);
|
||||
expect(attributes.stroke.value).toBe('red');
|
||||
expect(attributes.width.value).toBe('48');
|
||||
expect(attributes.height.value).toBe('48');
|
||||
expect(attributes['stroke-width'].value).toBe('4');
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
})
|
||||
@@ -1,6 +1,19 @@
|
||||
const mainConfig = require('../../babel.config');
|
||||
|
||||
module.exports = {
|
||||
presets: ['react-app'],
|
||||
env: mainConfig.env,
|
||||
presets: [
|
||||
[
|
||||
'@babel/env',
|
||||
{
|
||||
loose: true,
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
env: {
|
||||
...mainConfig.env,
|
||||
test: {
|
||||
presets: ['react-app'],
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "lucide-react",
|
||||
"description": "Lucide React package, Lucide is a community-run fork of Feather Icons, open for anyone to contribute icons.",
|
||||
"version": "0.15.0",
|
||||
"version": "0.15.19",
|
||||
"license": "ISC",
|
||||
"homepage": "https://lucide.dev",
|
||||
"bugs": "https://github.com/lucide-icons/lucide/issues",
|
||||
@@ -17,23 +17,23 @@
|
||||
"module": "dist/esm/lucide-react.js",
|
||||
"unpkg": "dist/umd/lucide-react.min.js",
|
||||
"typings": "dist/lucide-react.d.ts",
|
||||
"sideEffects": false,
|
||||
"scripts": {
|
||||
"build": "yarn clean && yarn build:icons && yarn build:es && yarn build:types && yarn build:bundles",
|
||||
"clean": "rm -rf dist && rm -rf stats && rm -rf ./src/icons/*.js",
|
||||
"build:icons": "yarn --cwd ../../ build:icons --output=../packages/lucide-react/src --templateSrc=../packages/lucide-react/scripts/exportTemplate --renderUniqueKey",
|
||||
"build:es": "yarn --cwd ../../ babel packages/lucide-react/src -d packages/lucide-react/dist/esm",
|
||||
"build:es": "babel src -d dist/esm",
|
||||
"build:types": "yarn --cwd ../../ babel-node packages/lucide-react/scripts/buildTypes.js",
|
||||
"build:bundles": "yarn --cwd ../../ rollup -c packages/lucide-react/rollup.config.js",
|
||||
"test": "jest"
|
||||
},
|
||||
"dependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/react": "^11.2.6",
|
||||
"babel-preset-react-app": "^10.0.0",
|
||||
"jest": "^26.6.3",
|
||||
"react-test-renderer": "^16.5.1"
|
||||
"prop-types": "^15.7.2",
|
||||
"react": "^16.5.1",
|
||||
"react-dom": "^17.0.2"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@@ -11,8 +11,10 @@ const srcDirectory = path.join(__dirname, '../dist');
|
||||
|
||||
// Declare type definitions
|
||||
const typeDefinitions = `\
|
||||
/// <reference types="react" />
|
||||
import { SVGAttributes } from 'react'
|
||||
/// <reference types="vue" />
|
||||
import { SVGAttributes } from 'vue'
|
||||
|
||||
declare module 'lucide-vue-next'
|
||||
|
||||
// Create interface extending SVGAttributes
|
||||
export interface LucideProps extends Partial<React.SVGProps<SVGSVGElement>> {
|
||||
|
||||
@@ -1,95 +1,5 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `
|
||||
<svg
|
||||
fill="none"
|
||||
height={48}
|
||||
stroke="red"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={4}
|
||||
viewBox="0 0 24 24"
|
||||
width={48}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="18"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="18"
|
||||
x="3"
|
||||
y="3"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
x2="21"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
x2="21"
|
||||
y1="15"
|
||||
y2="15"
|
||||
/>
|
||||
<line
|
||||
x1="9"
|
||||
x2="9"
|
||||
y1="3"
|
||||
y2="21"
|
||||
/>
|
||||
<line
|
||||
x1="15"
|
||||
x2="15"
|
||||
y1="3"
|
||||
y2="21"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
exports[`Using lucide icon components should adjust the size, stroke color and stroke width 1`] = `"<svg xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"48\\" height=\\"48\\" viewBox=\\"0 0 24 24\\" fill=\\"none\\" stroke=\\"red\\" stroke-width=\\"4\\" stroke-linecap=\\"round\\" stroke-linejoin=\\"round\\" data-testid=\\"grid-icon\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
|
||||
|
||||
exports[`Using lucide icon components should render an component 1`] = `
|
||||
<svg
|
||||
fill="none"
|
||||
height={24}
|
||||
stroke="currentColor"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
strokeWidth={2}
|
||||
viewBox="0 0 24 24"
|
||||
width={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<rect
|
||||
height="18"
|
||||
rx="2"
|
||||
ry="2"
|
||||
width="18"
|
||||
x="3"
|
||||
y="3"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
x2="21"
|
||||
y1="9"
|
||||
y2="9"
|
||||
/>
|
||||
<line
|
||||
x1="3"
|
||||
x2="21"
|
||||
y1="15"
|
||||
y2="15"
|
||||
/>
|
||||
<line
|
||||
x1="9"
|
||||
x2="9"
|
||||
y1="3"
|
||||
y2="21"
|
||||
/>
|
||||
<line
|
||||
x1="15"
|
||||
x2="15"
|
||||
y1="3"
|
||||
y2="21"
|
||||
/>
|
||||
</svg>
|
||||
`;
|
||||
exports[`Using lucide icon components should render an component 1`] = `"<svg 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\\"><rect x=\\"3\\" y=\\"3\\" width=\\"18\\" height=\\"18\\" rx=\\"2\\" ry=\\"2\\"></rect><line x1=\\"3\\" y1=\\"9\\" x2=\\"21\\" y2=\\"9\\"></line><line x1=\\"3\\" y1=\\"15\\" x2=\\"21\\" y2=\\"15\\"></line><line x1=\\"9\\" y1=\\"3\\" x2=\\"9\\" y2=\\"21\\"></line><line x1=\\"15\\" y1=\\"3\\" x2=\\"15\\" y2=\\"21\\"></line></svg>"`;
|
||||
|
||||
@@ -1,27 +1,31 @@
|
||||
import React from 'react';
|
||||
import renderer from 'react-test-renderer';
|
||||
import { render } from '@testing-library/react'
|
||||
import { Grid } from '../src/icons'
|
||||
|
||||
describe('Using lucide icon components', () => {
|
||||
it('should render an component', () => {
|
||||
const component = renderer.create(
|
||||
<Grid/>,
|
||||
);
|
||||
const { container } = render( <Grid/> );
|
||||
|
||||
let tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
|
||||
it('should adjust the size, stroke color and stroke width', () => {
|
||||
const component = renderer.create(
|
||||
const testId = 'grid-icon';
|
||||
const { container, getByTestId } = render(
|
||||
<Grid
|
||||
data-testid={testId}
|
||||
size={48}
|
||||
stroke="red"
|
||||
strokeWidth={4}
|
||||
/>,
|
||||
);
|
||||
|
||||
let tree = component.toJSON();
|
||||
expect(tree).toMatchSnapshot();
|
||||
const { attributes } = getByTestId(testId);
|
||||
expect(attributes.stroke.value).toBe('red');
|
||||
expect(attributes.width.value).toBe('48');
|
||||
expect(attributes.height.value).toBe('48');
|
||||
expect(attributes['stroke-width'].value).toBe('4');
|
||||
|
||||
expect( container.innerHTML ).toMatchSnapshot();
|
||||
});
|
||||
})
|
||||
|
||||
9
packages/lucide-vue-next/.npmignore
Normal file
@@ -0,0 +1,9 @@
|
||||
stats
|
||||
node_modules
|
||||
tests
|
||||
scripts
|
||||
build
|
||||
src
|
||||
babel.config.js
|
||||
jest.config.js
|
||||
rollup.config.js
|
||||
15
packages/lucide-vue-next/LICENSE
Normal file
@@ -0,0 +1,15 @@
|
||||
ISC License
|
||||
|
||||
Copyright (c) 2020, Lucide Contributors
|
||||
|
||||
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.
|
||||
107
packages/lucide-vue-next/README.md
Normal file
@@ -0,0 +1,107 @@
|
||||
# Lucide Vue Next
|
||||
|
||||
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-next](https://github.com/lucide-icons/lucide/tree/master/packages/lucide-vue#lucide-vue)
|
||||
|
||||
## Installation
|
||||
|
||||
```sh
|
||||
yarn add lucide-vue-next
|
||||
|
||||
# or
|
||||
|
||||
npm install lucide-vue-next
|
||||
```
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ESmodules so it's completely threeshakable.
|
||||
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-next';
|
||||
|
||||
export default {
|
||||
name: "My Component",
|
||||
components: { Camera }
|
||||
}
|
||||
|
||||
</script>
|
||||
```
|
||||
|
||||
### Props
|
||||
|
||||
| name | type | default
|
||||
| ------------ | -------- | --------
|
||||
| `size` | *Number* | 24
|
||||
| `color` | *String* | currentColor
|
||||
| `strokeWidth`| *Number* | 2
|
||||
| `defaultClass`| *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-next";
|
||||
|
||||
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>
|
||||
```
|
||||
14
packages/lucide-vue-next/babel.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
const mainConfig = require('../../babel.config');
|
||||
|
||||
module.exports = {
|
||||
presets: [
|
||||
[
|
||||
'@babel/env',
|
||||
{
|
||||
loose: true,
|
||||
modules: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
env: mainConfig.env,
|
||||
};
|
||||
14
packages/lucide-vue-next/jest.config.js
Normal file
@@ -0,0 +1,14 @@
|
||||
module.exports = {
|
||||
verbose: true,
|
||||
roots: ['<rootDir>/src/', '<rootDir>/tests/'],
|
||||
moduleFileExtensions: ['js'],
|
||||
transform: {
|
||||
'^.+\\.js$': 'babel-jest',
|
||||
'^.+\\.vue$': 'vue-jest',
|
||||
},
|
||||
transformIgnorePatterns: [`/node_modules`],
|
||||
snapshotSerializers: ['jest-serializer-vue'],
|
||||
moduleNameMapper: {
|
||||
'^@/(.*)$': '<rootDir>/src/$1',
|
||||
},
|
||||
};
|
||||