Compare commits
34 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c05c7e333f | ||
|
|
dff42fe326 | ||
|
|
c1f642e20f | ||
|
|
cf9565b69c | ||
|
|
4cc4468d2f | ||
|
|
fd9ab8f17a | ||
|
|
c9101f0f39 | ||
|
|
614ef1a1d5 | ||
|
|
1a441812ac | ||
|
|
4a33e90c65 | ||
|
|
062a64a078 | ||
|
|
95a1ea7255 | ||
|
|
a0a5bc8fc2 | ||
|
|
698eded89b | ||
|
|
a70b713572 | ||
|
|
34530ad805 | ||
|
|
f73aed151a | ||
|
|
2bd7748562 | ||
|
|
da8a6c5a1b | ||
|
|
5736028dfa | ||
|
|
45d2063340 | ||
|
|
f71d3ffd1d | ||
|
|
b8c3a5fa0b | ||
|
|
a4076db69b | ||
|
|
55cb681461 | ||
|
|
09d9bb747d | ||
|
|
42f9cdceca | ||
|
|
c652723b32 | ||
|
|
a44328d8be | ||
|
|
376568239f | ||
|
|
92d05b5fca | ||
|
|
27b5b7eaad | ||
|
|
4de1355e54 | ||
|
|
c8d94bf3e1 |
9
.github/workflows/lucide-font.yml
vendored
@@ -10,7 +10,6 @@ on:
|
||||
jobs:
|
||||
lucide-font:
|
||||
runs-on: ubuntu-latest
|
||||
container: ericfennis/lucide-font:latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- uses: actions/setup-node@v3.4.1
|
||||
@@ -43,11 +42,11 @@ jobs:
|
||||
- name: Outline svg Icons
|
||||
run: pnpm build:outline-icons
|
||||
|
||||
- name: Create directory
|
||||
run: mkdir lucide-font
|
||||
- name: Install dependencies
|
||||
run: pnpm install --filter build-font
|
||||
|
||||
- name: Build font
|
||||
run: fontcustom compile "./outlined" -h -n "lucide" -o ./lucide-font -F
|
||||
- name: Create font in ./lucide-font
|
||||
run: pnpm build:font
|
||||
|
||||
- name: "Upload to Artifacts"
|
||||
uses: actions/upload-artifact@v1
|
||||
|
||||
1
.github/workflows/lucide-react.yml
vendored
@@ -5,6 +5,7 @@ on:
|
||||
paths:
|
||||
- packages/lucide-react/**
|
||||
- tools/build-icons/**
|
||||
- scripts/generateNextJSAliases.mjs
|
||||
- pnpm-lock.yaml
|
||||
|
||||
jobs:
|
||||
|
||||
@@ -285,6 +285,9 @@ Thank you to all the people who contributed to Lucide!
|
||||
|
||||
## Sponsors
|
||||
|
||||
|
||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
|
||||
<img src="/docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
<img src="docs/public/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
</a>
|
||||
|
||||
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="docs/public/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
|
||||
|
||||
@@ -1,41 +1,44 @@
|
||||
import { eventHandler, setResponseHeader, defaultContentType } from 'h3'
|
||||
import { renderToString, renderToStaticMarkup } from 'react-dom/server'
|
||||
import { createElement } from 'react'
|
||||
import { eventHandler, setResponseHeader, defaultContentType } from 'h3';
|
||||
import { renderToString, renderToStaticMarkup } from 'react-dom/server';
|
||||
import { createElement } from 'react';
|
||||
import SvgPreview from '../../lib/SvgPreview/index.tsx';
|
||||
import iconNodes from '../../data/iconNodes'
|
||||
import createLucideIcon from 'lucide-react/src/createLucideIcon'
|
||||
import iconNodes from '../../data/iconNodes';
|
||||
import createLucideIcon from 'lucide-react/src/createLucideIcon';
|
||||
import Backdrop from '../../lib/SvgPreview/Backdrop.tsx';
|
||||
|
||||
export default eventHandler((event) => {
|
||||
const { params } = event.context
|
||||
const { params } = event.context;
|
||||
|
||||
const [name, svgData] = params.data.split('/');
|
||||
const data = svgData.slice(0, -4);
|
||||
const pathData = params.data.split('/');
|
||||
const data = pathData.at(-1).slice(0, -4);
|
||||
const [name] = pathData;
|
||||
|
||||
const src = Buffer.from(data, 'base64').toString('utf8');
|
||||
|
||||
const children = []
|
||||
const children = [];
|
||||
|
||||
if (name in iconNodes) {
|
||||
const iconNode = iconNodes[name]
|
||||
// If the icon already exists, it uses the existing icon as the backdrop.
|
||||
// If the icon does not exist but an icon exists that starts with the same group name, that icon
|
||||
// is used as the backdrop
|
||||
const backdropName =
|
||||
name in iconNodes ? name : name.split('-')[0] in iconNodes ? name.split('-')[0] : null;
|
||||
if (backdropName) {
|
||||
const iconNode = iconNodes[backdropName];
|
||||
|
||||
const LucideIcon = createLucideIcon(name, iconNode)
|
||||
const svg = renderToStaticMarkup(createElement(LucideIcon))
|
||||
const LucideIcon = createLucideIcon(backdropName, iconNode);
|
||||
const svg = renderToStaticMarkup(createElement(LucideIcon));
|
||||
const backdropString = svg.replace(/<svg[^>]*>|<\/svg>/g, '');
|
||||
|
||||
children.push(createElement(Backdrop, { backdropString, src }))
|
||||
children.push(createElement(Backdrop, { backdropString, src }));
|
||||
}
|
||||
|
||||
const svg = Buffer.from(
|
||||
// We can't use jsx here, is not supported here by nitro.
|
||||
renderToString(createElement(SvgPreview, {src, showGrid: true}, children)).replace(
|
||||
/>/,
|
||||
'><style>@media screen and (prefers-color-scheme: dark) { svg { stroke: #fff } }</style>'
|
||||
)
|
||||
renderToString(createElement(SvgPreview, { src, showGrid: true }, children))
|
||||
).toString('utf8');
|
||||
|
||||
defaultContentType(event, 'image/svg+xml')
|
||||
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000')
|
||||
defaultContentType(event, 'image/svg+xml');
|
||||
setResponseHeader(event, 'Cache-Control', 'public,max-age=31536000');
|
||||
|
||||
return svg
|
||||
})
|
||||
return svg;
|
||||
});
|
||||
|
||||
@@ -12,6 +12,7 @@ export default defineConfig({
|
||||
description,
|
||||
cleanUrls: true,
|
||||
outDir: '.vercel/output/static',
|
||||
srcExclude: ['**/README.md'],
|
||||
vite: {
|
||||
resolve: {
|
||||
alias: [
|
||||
|
||||
@@ -24,7 +24,7 @@ const getIconCodes = (): CodeExampleType => {
|
||||
codes: [
|
||||
{
|
||||
language: 'html',
|
||||
code: `<i data-lucide-name="Name"></i>
|
||||
code: `<i data-lucide="Name"></i>
|
||||
`,
|
||||
},
|
||||
],
|
||||
|
||||
@@ -10,26 +10,49 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
|
||||
{ text: 'Comparison', link: '/guide/comparison' }
|
||||
]
|
||||
},
|
||||
{
|
||||
text: 'Basics',
|
||||
items: [
|
||||
{
|
||||
text: 'Color',
|
||||
link: '/guide/basics/color'
|
||||
},
|
||||
{
|
||||
text: 'Sizing',
|
||||
link: '/guide/basics/sizing'
|
||||
},
|
||||
{
|
||||
text: 'Stroke width',
|
||||
link: '/guide/basics/stroke-width'
|
||||
},
|
||||
]
|
||||
},
|
||||
// TODO: Add this section
|
||||
// {
|
||||
// text: 'Using Icons',
|
||||
// text: 'Advanced',
|
||||
// items: [
|
||||
// {
|
||||
// text: 'How to use icons',
|
||||
// link: 'how-to-use-icons'
|
||||
// },
|
||||
// {
|
||||
// text: 'Styling icons',
|
||||
// link: 'styling-icons'
|
||||
// },
|
||||
// {
|
||||
// text: 'Accessibility',
|
||||
// link: 'accessibility'
|
||||
// link: '/guide/advanced/accessibility'
|
||||
// },
|
||||
// {
|
||||
// text: 'What should I use',
|
||||
// link: 'what-should-i-use'
|
||||
// text: 'Global styling',
|
||||
// },
|
||||
|
||||
// {
|
||||
// text: 'Animations',
|
||||
// },
|
||||
// {
|
||||
// text: 'Filled icons',
|
||||
// },
|
||||
// {
|
||||
// text: 'Combining icons',
|
||||
// },
|
||||
// {
|
||||
// text: 'Dynamic imports'
|
||||
// },
|
||||
// // {
|
||||
// // text: 'Auto importing'
|
||||
// // },
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
@@ -103,15 +126,9 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
|
||||
]
|
||||
},
|
||||
],
|
||||
// This should be here to keep the sidebar shown on the icons page
|
||||
'icons': [
|
||||
{ text: '', link: '/' },
|
||||
// { text: 'Categorized', link: '/icons/categorized' },
|
||||
// {
|
||||
// text: 'Categories',
|
||||
// items: [
|
||||
// ...(getAllCategoryFiles().map((category) => ({ text: category, link: `/icons/category/${category}` })))
|
||||
// ]
|
||||
// }
|
||||
],
|
||||
}
|
||||
|
||||
|
||||
@@ -36,15 +36,22 @@ const links = computed(() => [
|
||||
<template>
|
||||
<footer v-if="theme.footer" class="VPFooter" :class="{ 'has-sidebar': hasSidebar }">
|
||||
<div class="container">
|
||||
<p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
|
||||
<p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
|
||||
<div class="sponsors">
|
||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss" rel="noreferrer noopener">
|
||||
<img src="/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
</a>
|
||||
<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge" rel="noreferrer noopener">
|
||||
<img src="/digitalocean.svg" alt="Digital Ocean" width="200" />
|
||||
</a>
|
||||
</div>
|
||||
<div class="links">
|
||||
<VPLink v-for="link in links" :href="link.href" :key="link.text" :rel="link.href.startsWith('http') ? 'noreferrer noopener': undefined">
|
||||
{{ link.text }}
|
||||
</VPLink>
|
||||
<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss" rel="noreferrer noopener">
|
||||
<img src="/vercel.svg" alt="Powered by Vercel" width="200" />
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<p v-if="theme.footer.message" class="message" v-html="theme.footer.message"></p>
|
||||
<p v-if="theme.footer.copyright" class="copyright" v-html="theme.footer.copyright"></p>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
@@ -67,7 +74,7 @@ const links = computed(() => [
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: var(--vp-layout-max-width);
|
||||
max-width: calc(var(--vp-layout-max-width) - 64px);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
@@ -85,7 +92,7 @@ const links = computed(() => [
|
||||
.message { order: 2; }
|
||||
.copyright { order: 1; }
|
||||
|
||||
.links {
|
||||
.links, .sponsors {
|
||||
display: flex;
|
||||
gap: 32px;
|
||||
align-items: center;
|
||||
@@ -102,7 +109,7 @@ const links = computed(() => [
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
.links {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
34
docs/.vitepress/theme/sandpackTheme.json
Normal file
@@ -0,0 +1,34 @@
|
||||
{
|
||||
"colors": {
|
||||
"surface1": "var(--vp-code-block-bg)",
|
||||
"surface2": "var(--vp-code-block-bg)",
|
||||
"surface3": "var(--vp-code-line-highlight-color)",
|
||||
"clickable": "var(--vp-c-text-2)",
|
||||
"base": "#323232",
|
||||
"disabled": "#C5C5C5",
|
||||
"hover": "var(--vp-c-brand)",
|
||||
"accent": "var(--vp-c-brand)",
|
||||
"error": "var(--vp-c-red)",
|
||||
"errorSurface": "#ffeceb"
|
||||
},
|
||||
"syntax": {
|
||||
"plain": "var(--vp-code-editor-plain)",
|
||||
"comment": {
|
||||
"color": "var(--vp-code-editor-comment)",
|
||||
"fontStyle": "italic"
|
||||
},
|
||||
"keyword": "var(--vp-code-editor-keyword)",
|
||||
"tag": "var(--vp-code-editor-tag)",
|
||||
"punctuation": "var(--vp-code-editor-punctuation)",
|
||||
"definition": "var(--vp-code-editor-definition)",
|
||||
"property": "var(--vp-code-editor-property)",
|
||||
"static": "var(--vp-code-editor-static)",
|
||||
"string": "var(--vp-code-editor-string)"
|
||||
},
|
||||
"font": {
|
||||
"body": "var(--vp-font-family-base)",
|
||||
"mono": "var(--vp-font-family-mono)",
|
||||
"size": "var(--vp-code-font-size)",
|
||||
"lineHeight": "var(--vp-code-line-height)"
|
||||
}
|
||||
}
|
||||
@@ -5,13 +5,39 @@
|
||||
--vp-c-brand-dark: #DC5A5A;
|
||||
--vp-c-brand-darker: #C45050;
|
||||
|
||||
--vp-c-brand-1: #F67373;
|
||||
--vp-c-brand-2: #FF7070;
|
||||
--vp-c-brand-3: #F56565;
|
||||
--vp-c-brand-4: #DC5A5A;
|
||||
--vp-c-brand-5: #C45050;
|
||||
|
||||
--vp-c-bg-alt-up: #fff;
|
||||
--vp-c-bg-alt-down: #fff;
|
||||
|
||||
--vp-code-editor-plain: #24292E;
|
||||
--vp-code-editor-comment: #6A737D;
|
||||
--vp-code-editor-keyword: #D73A49;
|
||||
--vp-code-editor-tag: #22863A;
|
||||
--vp-code-editor-punctuation: #24292E;
|
||||
--vp-code-editor-definition: #6F42C1;
|
||||
--vp-code-editor-property: #005CC5;
|
||||
--vp-code-editor-static: #F78C6C;
|
||||
--vp-code-editor-string: #032F62;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--vp-c-bg-alt-up: #1B1B1D;
|
||||
--vp-c-bg-alt-down: #0F0F10;
|
||||
|
||||
--vp-code-editor-plain: #E1E4E8;
|
||||
--vp-code-editor-comment: #6A737D;
|
||||
--vp-code-editor-keyword: #F97583;
|
||||
--vp-code-editor-tag: #85E89D;
|
||||
--vp-code-editor-punctuation: #9ECBFF;
|
||||
--vp-code-editor-definition: #B392F0;
|
||||
--vp-code-editor-property: #79B8FF;
|
||||
--vp-code-editor-static: #F78C6C;
|
||||
--vp-code-editor-string: #9ECBFF;
|
||||
}
|
||||
|
||||
.VPNavBarTitle .logo {
|
||||
@@ -126,3 +152,52 @@
|
||||
html:has(* .outline-link:target) {
|
||||
scroll-behavior: smooth;
|
||||
} */
|
||||
|
||||
.sp-wrapper .sp-layout {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-tabs-scrollable-container {
|
||||
border-radius: 8px 8px 0 0;
|
||||
position: relative;
|
||||
|
||||
box-shadow: inset 0 -1px var(--vp-code-tab-divider);
|
||||
margin-bottom: 0px;
|
||||
margin-top: -1px;
|
||||
height: 48px;
|
||||
padding-bottom: 1px;
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-preview-container {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-tabs .sp-tab-button {
|
||||
padding: 0 12px;
|
||||
line-height: 48px;
|
||||
height: 48px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
position: relative;
|
||||
/* box-sizing: content-box; */
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-tabs .sp-tab-button:after {
|
||||
position: absolute;
|
||||
right: 8px;
|
||||
left: 8px;
|
||||
bottom: 0px;
|
||||
z-index: 1;
|
||||
height: 1px;
|
||||
content: '';
|
||||
background-color: transparent;
|
||||
transition: background-color 0.25s;
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-tabs .sp-tab-button[data-active="true"] {
|
||||
color: var(--vp-code-tab-active-text-color);
|
||||
}
|
||||
|
||||
.sp-wrapper .sp-tabs .sp-tab-button[data-active="true"]:after {
|
||||
background-color: var(--vp-code-tab-active-bar-color);
|
||||
}
|
||||
|
||||
@@ -3,8 +3,6 @@
|
||||
The Lucide docs website is built with Vitepress: https://vitepress.dev/
|
||||
This is Markdown-based documentation powered by Vue.
|
||||
|
||||
This is why this file is in txt format.
|
||||
|
||||
## Development
|
||||
|
||||
```sh
|
||||
4
docs/guide/advanced/accessibility.md
Normal file
@@ -0,0 +1,4 @@
|
||||
# Accessibility
|
||||
|
||||
<!-- Description how you should use svg icons keeping web accessible -->
|
||||
<!-- See @JanTrichter comment about some information to write this: https://github.com/lucide-icons/lucide/pull/1521#discussion_r1332141390 -->
|
||||
13
docs/guide/advanced/filled-icons.md
Normal file
@@ -0,0 +1,13 @@
|
||||
# Filled Icons
|
||||
|
||||
Fills are officially not supported.
|
||||
However, all SVG properties are available on all icons.
|
||||
Fill can still be used and will work fine on certain icons.
|
||||
|
||||
Example with stars:
|
||||
|
||||
<!-- Code Example with stars -->
|
||||
|
||||
## Will Lucide have fills in the future?
|
||||
|
||||
This feature is requested several times and discussion is happening at: [#458](https://github.com/lucide-icons/lucide/discussions/458).
|
||||
52
docs/guide/basics/color.md
Normal file
@@ -0,0 +1,52 @@
|
||||
<script setup>
|
||||
import { Sandpack } from 'sandpack-vue3'
|
||||
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
|
||||
import buttonExampleFiles from './examples/button-example/files.ts'
|
||||
import iconColorExampleFiles from './examples/color-icon/files.ts'
|
||||
</script>
|
||||
|
||||
# Color
|
||||
|
||||
By default, all icons have the color value: `currentColor`. This keyword uses the element's computed text `color` value to represent the icon color.
|
||||
|
||||
Read more about [ `currentColor` on MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#currentcolor_keyword).
|
||||
|
||||
## Adjust the color using the `color` prop
|
||||
|
||||
The color can be adjusted by passing the color prop to the element.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="iconColorExampleFiles"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 295,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
|
||||
## Using parent elements text color value
|
||||
|
||||
Because the color of lucide icons uses `currentColor`, the color of the icon depends on the computed `color` of the element, or it inherits it from its parent.
|
||||
|
||||
For example, if a parent element's color value is `#fff` and one of the children is a lucide icon, the color of the icon will be rendered as `#fff`. This is browser native behavior.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="buttonExampleFiles"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 320,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
14
docs/guide/basics/examples/absolute-stroke-width-icon/App.js
Normal file
@@ -0,0 +1,14 @@
|
||||
import { RollerCoaster } from "lucide-react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<RollerCoaster
|
||||
size={96}
|
||||
absoluteStrokeWidth={true}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,15 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
active: true,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
5
docs/guide/basics/examples/button-example/App.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import Button from "./Button";
|
||||
|
||||
export default function App() {
|
||||
return <Button />;
|
||||
}
|
||||
12
docs/guide/basics/examples/button-example/Button.jsx
Normal file
@@ -0,0 +1,12 @@
|
||||
import { ThumbsUp } from "lucide-react";
|
||||
|
||||
function LikeButton() {
|
||||
return (
|
||||
<button style={{ color: "#fff" }}>
|
||||
<ThumbsUp />
|
||||
Like
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
export default LikeButton;
|
||||
21
docs/guide/basics/examples/button-example/files.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import App from './App.js?raw'
|
||||
import Button from './Button.jsx?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
hidden: true
|
||||
},
|
||||
'Button.jsx': {
|
||||
code: Button,
|
||||
active: true,
|
||||
readOnly: false,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
11
docs/guide/basics/examples/color-icon/App.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Smile } from "lucide-react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Smile color="#3e9392" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
15
docs/guide/basics/examples/color-icon/files.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
active: true,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
12
docs/guide/basics/examples/size-icon-css-example/App.js
Normal file
@@ -0,0 +1,12 @@
|
||||
import { Beer } from "lucide-react";
|
||||
import "./icon.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Beer className="my-beer-icon" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
21
docs/guide/basics/examples/size-icon-css-example/files.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
import IconCss from './icon.css?raw'
|
||||
|
||||
const files = {
|
||||
'icon.css': {
|
||||
code: IconCss,
|
||||
readOnly: false,
|
||||
active: true,
|
||||
},
|
||||
'App.js': {
|
||||
code: App,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
export default files
|
||||
@@ -0,0 +1,5 @@
|
||||
.my-beer-icon {
|
||||
/* Change this! */
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
}
|
||||
11
docs/guide/basics/examples/size-icon-example/App.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Landmark } from "lucide-react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<Landmark size={64} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
15
docs/guide/basics/examples/size-icon-example/files.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
active: true,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
13
docs/guide/basics/examples/size-icon-font-example/App.js
Normal file
@@ -0,0 +1,13 @@
|
||||
import { Star } from "lucide-react";
|
||||
import "./icon.css";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="text-wrapper">
|
||||
<Star class="my-icon" />
|
||||
<div>Yes</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
21
docs/guide/basics/examples/size-icon-font-example/files.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
import IconCss from './icon.css?raw'
|
||||
|
||||
const files = {
|
||||
'icon.css': {
|
||||
code: IconCss,
|
||||
readOnly: false,
|
||||
active: true,
|
||||
},
|
||||
'App.js': {
|
||||
code: App,
|
||||
},
|
||||
'styles.css': {
|
||||
code: styles,
|
||||
hidden: true
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
export default files
|
||||
15
docs/guide/basics/examples/size-icon-font-example/icon.css
Normal file
@@ -0,0 +1,15 @@
|
||||
.my-icon {
|
||||
/* Icon size will relative to font-size of .text-wrapper */
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
.text-wrapper {
|
||||
/* Change this! */
|
||||
font-size: 96px;
|
||||
|
||||
/* layout stuff */
|
||||
display: flex;
|
||||
gap: 0.25em;
|
||||
items-align: center;
|
||||
}
|
||||
11
docs/guide/basics/examples/size-icon-tailwind-example/App.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { PartyPopper } from "lucide-react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div>
|
||||
<PartyPopper className="w-24 h-24" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
@@ -0,0 +1,15 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
active: true
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
11
docs/guide/basics/examples/stroke-width-icon/App.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import { FolderLock } from "lucide-react";
|
||||
|
||||
function App() {
|
||||
return (
|
||||
<div className="app">
|
||||
<FolderLock strokeWidth={1} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
15
docs/guide/basics/examples/stroke-width-icon/files.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import App from './App.js?raw'
|
||||
import styles from '../styles.css?raw'
|
||||
|
||||
const files = {
|
||||
'App.js': {
|
||||
code: App,
|
||||
active: true,
|
||||
},
|
||||
'styles.css': {
|
||||
code:styles,
|
||||
hidden: true
|
||||
},
|
||||
}
|
||||
|
||||
export default files
|
||||
50
docs/guide/basics/examples/styles.css
Normal file
@@ -0,0 +1,50 @@
|
||||
body {
|
||||
font-family: sans-serif;
|
||||
-webkit-font-smoothing: auto;
|
||||
-moz-font-smoothing: auto;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-smoothing: auto;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-smooth: always;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
background: #202127;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
padding: 10px 20px;
|
||||
line-height: 24px;
|
||||
gap: 8px;
|
||||
border-radius: 24px;
|
||||
outline: none;
|
||||
border: none;
|
||||
background: #111;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #F56565;
|
||||
}
|
||||
|
||||
.app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 32px;
|
||||
}
|
||||
87
docs/guide/basics/sizing.md
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup>
|
||||
import { Sandpack } from 'sandpack-vue3'
|
||||
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
|
||||
import sizeIconExample from './examples/size-icon-example/files.ts'
|
||||
import sizeIconCssExample from './examples/size-icon-css-example/files.ts'
|
||||
import sizeIconFontExample from './examples/size-icon-font-example/files.ts'
|
||||
import sizeIconTailwind from './examples/size-icon-tailwind-example/files.ts'
|
||||
</script>
|
||||
|
||||
# Sizing
|
||||
|
||||
By default, the size of all icons is `24px` by `24px`. The size is adjustable using the `size` prop and CSS.
|
||||
|
||||
## Adjusting the icon size using the `size` prop
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="sizeIconExample"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 300,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
|
||||
## Adjusting the icon size via CSS
|
||||
|
||||
The CSS properties `width` and `height` can be used to adjust the icon size.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="sizeIconCssExample"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 300,
|
||||
}"
|
||||
/>
|
||||
|
||||
### Dynamically change the icon size based on the font size
|
||||
|
||||
It is possible to resize icons based on font size. This can be achieved using the `em` unit. See this [MDN article](https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#ems) for more information on the `em` unit.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="sizeIconFontExample"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 300,
|
||||
}"
|
||||
/>
|
||||
|
||||
### Resizing with Tailwind
|
||||
|
||||
`h-*` and `w-*` utilities can be used to adjust the size of the icon.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="sizeIconTailwind"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest",
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
externalResources: ['https://cdn.tailwindcss.com'],
|
||||
editorHeight: 300,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
|
||||
<!-- Code Example -->
|
||||
60
docs/guide/basics/stroke-width.md
Normal file
@@ -0,0 +1,60 @@
|
||||
<script setup>
|
||||
import { Sandpack } from 'sandpack-vue3'
|
||||
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
|
||||
import strokeWidth from './examples/stroke-width-icon/files.ts'
|
||||
import absoluteStrokeWidth from './examples/absolute-stroke-width-icon/files.ts'
|
||||
</script>
|
||||
|
||||
# Stroke width
|
||||
|
||||
All icons are designed with SVG elements using strokes.
|
||||
These have a default stroke width of `2px`.
|
||||
|
||||
The `strokeWidth` can be adjusted to create a different look of the icons.
|
||||
|
||||
## Adjusting stroke width with `strokeWidth` prop
|
||||
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="strokeWidth"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 300,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
|
||||
## Absolute stroke width
|
||||
|
||||
When adjusting the `size` prop the size of the stroke width will be relative to the size of the icon, this is the default SVG behavior. The `absoluteStrokeWidth` prop is introduced to adjust this behavior to make the stroke width constant no matter the size of the icon.
|
||||
|
||||
This means that when `absoluteStrokeWidth` is enabled and the `size` of the icons is set to `48px` the `strokeWidth` will still be `2px` on the screen.
|
||||
|
||||
Note `2px` is the default stroke width for a Lucide icon, this can be adjusted to all sizes.
|
||||
|
||||

|
||||
|
||||
### Adjusting stroke width with `absoluteStrokeWidth` prop
|
||||
|
||||
Setting `absoluteStrokeWidth` to `true` will make the stroke width absolute.
|
||||
|
||||
<Sandpack
|
||||
template="react"
|
||||
:theme="sandpackTheme"
|
||||
:files="absoluteStrokeWidth"
|
||||
:customSetup='{
|
||||
dependencies: {
|
||||
"lucide-react": "latest"
|
||||
}
|
||||
}'
|
||||
:options="{
|
||||
editorHeight: 320,
|
||||
editorWidthPercentage: 60,
|
||||
}"
|
||||
/>
|
||||
1
docs/guide/how-to-use-icons.md
Normal file
@@ -0,0 +1 @@
|
||||
# How to use icons
|
||||
@@ -26,9 +26,9 @@ npm install lucide-preact
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a Preact component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a Preact component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -56,7 +56,7 @@ export default App;
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```jsx
|
||||
// Usage
|
||||
@@ -69,10 +69,10 @@ const App = () => {
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
@@ -52,7 +52,7 @@ export default App;
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component.
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements.
|
||||
|
||||
```jsx
|
||||
// Usage
|
||||
@@ -63,10 +63,10 @@ const App = () => {
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: warning
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
@@ -22,9 +22,9 @@ npm install lucide-react
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a React component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a React component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -52,7 +52,7 @@ export default App;
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```jsx
|
||||
// Usage
|
||||
@@ -63,10 +63,10 @@ const App = () => {
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
|
||||
This is not the case for the latest NextJS, because it uses server side rendering. The icons will be streamed to the client when needed. For NextJS with Dynamic Imports, see [dynamic imports](#nextjs-example) section for more information.
|
||||
:::
|
||||
@@ -101,7 +101,7 @@ export default App;
|
||||
|
||||
> :warning: This is experimental and only works with bundlers that support 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.
|
||||
Lucide react exports a dynamic import map `dynamicIconImports`, which is 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.
|
||||
|
||||
|
||||
@@ -22,9 +22,9 @@ npm install lucide-solid
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a Solid component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a Solid component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -52,7 +52,7 @@ export default App;
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```jsx
|
||||
// Usage
|
||||
@@ -66,7 +66,7 @@ const App = () => {
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important to keep in mind when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
@@ -22,9 +22,9 @@ npm install lucide-svelte
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a Svelte component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a Svelte component, which renders an inline SVG element. This way, only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -59,7 +59,7 @@ Additional props can be passed to adjust the icon:
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```svelte
|
||||
<script>
|
||||
@@ -73,10 +73,10 @@ This results a filled phone icon.
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
@@ -28,9 +28,9 @@ npm install lucide-vue-next
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -61,7 +61,7 @@ import { Camera } from 'lucide-vue-next';
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@@ -71,10 +71,10 @@ To apply custom props to change the look of the icon, this can be done by simply
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
@@ -28,9 +28,9 @@ npm install lucide-vue
|
||||
|
||||
## How to use
|
||||
|
||||
It's build with ES Modules so it's completely tree-shakable.
|
||||
Lucide is built with ES Modules, so it's completely tree-shakable.
|
||||
|
||||
Each icon can be imported as a Vue component, what renders a inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
Each icon can be imported as a Vue component, which renders an inline SVG Element. This way only the icons that are imported into your project are included in the final bundle. The rest of the icons are tree-shaken away.
|
||||
|
||||
### Example
|
||||
|
||||
@@ -63,7 +63,7 @@ Additional props can be passed to adjust the icon:
|
||||
|
||||
### Applying props
|
||||
|
||||
To apply custom props to change the look of the icon, this can be done by simply pass them as props to the component. All SVG attributes are available as props to style the SVGs. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
To customize the appearance of an icon, you can pass custom properties as props directly to the component. The component accepts all SVG attributes as props, which allows flexible styling of the SVG elements. See the list of SVG Presentation Attributes on [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/Presentation).
|
||||
|
||||
```vue
|
||||
<template>
|
||||
@@ -73,10 +73,10 @@ To apply custom props to change the look of the icon, this can be done by simply
|
||||
|
||||
## One generic icon component
|
||||
|
||||
It is possible to create one generic icon component to load icons. It's not recommended.
|
||||
It is possible to create one generic icon component to load icons, but it is not recommended.
|
||||
|
||||
::: danger
|
||||
Example below importing all ES Modules, caution using this example. All icons will be imported. When using bundlers like: `Webpack`, `Rollup` or `Vite` the application build size will grow strongly and harming the performance the application.
|
||||
The example below imports all ES Modules, so exercise caution when using it. Importing all icons will significantly increase the build size of the application, negatively affecting its performance. This is especially important when using bundlers like `Webpack`, `Rollup`, or `Vite`.
|
||||
:::
|
||||
|
||||
### Icon Component Example
|
||||
|
||||
BIN
docs/images/absolute-stroke-width-compare.png
Normal file
|
After Width: | Height: | Size: 52 KiB |
@@ -29,7 +29,7 @@
|
||||
"nitropack": "npm:nitropack-edge@latest",
|
||||
"node-fetch": "2",
|
||||
"rollup-plugin-copy": "^3.4.0",
|
||||
"vitepress": "1.0.0-rc.4"
|
||||
"vitepress": "1.0.0-rc.10"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/vue": "^1.0.1",
|
||||
@@ -47,6 +47,7 @@
|
||||
"lucide-vue-next": "workspace:*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0",
|
||||
"sandpack-vue3": "^3.1.6",
|
||||
"semver": "^7.5.2",
|
||||
"shiki": "^0.14.2",
|
||||
"shiki-processor": "^0.1.3",
|
||||
|
||||
7
docs/public/digitalocean.svg
Normal file
|
After Width: | Height: | Size: 7.3 KiB |
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-down-01"
|
||||
]
|
||||
}
|
||||
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-down-10"
|
||||
]
|
||||
}
|
||||
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-down-az"
|
||||
]
|
||||
}
|
||||
@@ -14,5 +14,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-down-za"
|
||||
]
|
||||
}
|
||||
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-up-01"
|
||||
]
|
||||
}
|
||||
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-up-10"
|
||||
]
|
||||
}
|
||||
@@ -13,5 +13,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-up-az"
|
||||
]
|
||||
}
|
||||
@@ -14,5 +14,8 @@
|
||||
"text",
|
||||
"layout",
|
||||
"arrows"
|
||||
],
|
||||
"aliases": [
|
||||
"arrow-up-za"
|
||||
]
|
||||
}
|
||||
@@ -11,5 +11,8 @@
|
||||
],
|
||||
"categories": [
|
||||
"design"
|
||||
],
|
||||
"aliases": [
|
||||
"axis-3-d"
|
||||
]
|
||||
}
|
||||
@@ -8,12 +8,17 @@
|
||||
"verified",
|
||||
"unverified",
|
||||
"sale",
|
||||
"marketing"
|
||||
"discount",
|
||||
"offer",
|
||||
"marketing",
|
||||
"sticker",
|
||||
"price tag"
|
||||
],
|
||||
"categories": [
|
||||
"account",
|
||||
"social",
|
||||
"money",
|
||||
"shopping",
|
||||
"maths",
|
||||
"shapes"
|
||||
]
|
||||
|
||||
@@ -3,7 +3,6 @@
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"aliases": ["slash"],
|
||||
"tags": [
|
||||
"cancel",
|
||||
"no",
|
||||
|
||||
22
icons/barcode.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"scan",
|
||||
"checkout",
|
||||
"till",
|
||||
"cart",
|
||||
"transaction",
|
||||
"purchase",
|
||||
"buy",
|
||||
"product",
|
||||
"packaging",
|
||||
"retail",
|
||||
"consumer"
|
||||
],
|
||||
"categories": [
|
||||
"shopping"
|
||||
]
|
||||
}
|
||||
17
icons/barcode.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="M3 5v14" />
|
||||
<path d="M8 5v14" />
|
||||
<path d="M12 5v14" />
|
||||
<path d="M17 5v14" />
|
||||
<path d="M21 5v14" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 326 B |
@@ -10,6 +10,6 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="11" cy="13" r="9" />
|
||||
<path d="m19.5 9.5 1.8-1.8a2.4 2.4 0 0 0 0-3.4l-1.6-1.6a2.41 2.41 0 0 0-3.4 0l-1.8 1.8" />
|
||||
<path d="m19.5 9.5 1.8-1.8a2.4 2.4 0 0 0 0-3.4l-1.6-1.6a2.4 2.4 0 0 0-3.4 0l-1.8 1.8" />
|
||||
<path d="m22 2-1.5 1.5" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 365 B After Width: | Height: | Size: 363 B |
16
icons/bookmark-check.json
Normal file
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"read",
|
||||
"finished",
|
||||
"complete",
|
||||
"clip",
|
||||
"marker",
|
||||
"tag",
|
||||
"task",
|
||||
"todo"
|
||||
],
|
||||
"categories": [
|
||||
"account"
|
||||
]
|
||||
}
|
||||
14
icons/bookmark-check.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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
|
||||
<path d="m9 10 2 2 4-4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 301 B |
17
icons/bookmark-x.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"read",
|
||||
"clip",
|
||||
"marker",
|
||||
"tag",
|
||||
"cancel",
|
||||
"close",
|
||||
"delete",
|
||||
"remove",
|
||||
"clear"
|
||||
],
|
||||
"categories": [
|
||||
"account"
|
||||
]
|
||||
}
|
||||
15
icons/bookmark-x.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="m19 21-7-4-7 4V5a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2Z" />
|
||||
<path d="m14.5 7.5-5 5" />
|
||||
<path d="m9.5 7.5 5 5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 329 B |
@@ -1,7 +1,6 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"mittalyashu",
|
||||
"ericfennis"
|
||||
],
|
||||
"tags": [
|
||||
@@ -14,4 +13,4 @@
|
||||
"development",
|
||||
"social"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,9 +9,10 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="18" height="10" x="3" y="11" rx="2" />
|
||||
<circle cx="12" cy="5" r="2" />
|
||||
<path d="M12 7v4" />
|
||||
<line x1="8" x2="8" y1="16" y2="16" />
|
||||
<line x1="16" x2="16" y1="16" y2="16" />
|
||||
<path d="M12 8V4H8" />
|
||||
<rect width="16" height="12" x="4" y="8" rx="2" />
|
||||
<path d="M2 14h2" />
|
||||
<path d="M20 14h2" />
|
||||
<path d="M15 13v2" />
|
||||
<path d="M9 13v2" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 403 B After Width: | Height: | Size: 380 B |
@@ -8,11 +8,17 @@
|
||||
],
|
||||
"tags": [
|
||||
"cube",
|
||||
"package"
|
||||
"package",
|
||||
"container",
|
||||
"storage",
|
||||
"geometry",
|
||||
"3d",
|
||||
"isometric"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"gaming",
|
||||
"development"
|
||||
"development",
|
||||
"maths"
|
||||
]
|
||||
}
|
||||
@@ -10,7 +10,8 @@
|
||||
"group",
|
||||
"units",
|
||||
"collection",
|
||||
"cluster"
|
||||
"cluster",
|
||||
"geometry"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
|
||||
22
icons/caravan.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"trailer",
|
||||
"tow",
|
||||
"camping",
|
||||
"campsite",
|
||||
"mobile home",
|
||||
"holiday",
|
||||
"nomadic",
|
||||
"wilderness",
|
||||
"outdoors"
|
||||
],
|
||||
"categories": [
|
||||
"transportation",
|
||||
"travel",
|
||||
"nature"
|
||||
]
|
||||
}
|
||||
17
icons/caravan.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"
|
||||
>
|
||||
<rect width="4" height="4" x="2" y="9" />
|
||||
<rect width="4" height="10" x="10" y="9" />
|
||||
<path d="M18 19V9a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v8a2 2 0 0 0 2 2h2" />
|
||||
<circle cx="8" cy="19" r="2" />
|
||||
<path d="M10 19h12v-2" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 432 B |
@@ -6,11 +6,12 @@
|
||||
"tags": [
|
||||
"backwards",
|
||||
"reverse",
|
||||
"slow"
|
||||
"slow",
|
||||
"dropdown"
|
||||
],
|
||||
"categories": [
|
||||
"arrows",
|
||||
"navigation",
|
||||
"gaming"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -14,7 +14,8 @@
|
||||
"power",
|
||||
"ahead",
|
||||
"fast",
|
||||
"^"
|
||||
"^",
|
||||
"dropdown"
|
||||
],
|
||||
"categories": [
|
||||
"arrows",
|
||||
@@ -22,4 +23,4 @@
|
||||
"maths",
|
||||
"gaming"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,6 +11,11 @@
|
||||
"null",
|
||||
"void",
|
||||
"ban",
|
||||
"maths",
|
||||
"divide",
|
||||
"division",
|
||||
"half",
|
||||
"split",
|
||||
"/"
|
||||
],
|
||||
"categories": [
|
||||
|
||||
@@ -21,9 +21,14 @@
|
||||
"mistake",
|
||||
"wrong",
|
||||
"failure",
|
||||
"divide",
|
||||
"division",
|
||||
"or",
|
||||
"/"
|
||||
],
|
||||
"categories": [
|
||||
"shapes"
|
||||
"shapes",
|
||||
"development",
|
||||
"maths"
|
||||
]
|
||||
}
|
||||
@@ -2,15 +2,21 @@
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"it-is-not",
|
||||
"ericfennis"
|
||||
"ericfennis",
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"movie",
|
||||
"film",
|
||||
"video",
|
||||
"camera",
|
||||
"cinema",
|
||||
"cut",
|
||||
"action",
|
||||
"television",
|
||||
"tv",
|
||||
"television"
|
||||
"show",
|
||||
"entertainment"
|
||||
],
|
||||
"categories": [
|
||||
"multimedia"
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M4 11v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8H4Z" />
|
||||
<path d="m4 11-.88-2.87a2 2 0 0 1 1.33-2.5l11.48-3.5a2 2 0 0 1 2.5 1.32l.87 2.87L4 11.01Z" />
|
||||
<path d="m6.6 4.99 3.38 4.2" />
|
||||
<path d="m11.86 3.38 3.38 4.2" />
|
||||
<path d="M20.2 6 3 11l-.9-2.4c-.3-1.1.3-2.2 1.3-2.5l13.5-4c1.1-.3 2.2.3 2.5 1.3Z" />
|
||||
<path d="m6.2 5.3 3.1 3.9" />
|
||||
<path d="m12.4 3.4 3.1 4" />
|
||||
<path d="M3 11h18v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Z" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 434 B After Width: | Height: | Size: 415 B |
18
icons/cone.json
Normal file
@@ -0,0 +1,18 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"conical",
|
||||
"triangle",
|
||||
"triangular",
|
||||
"geometry",
|
||||
"filter",
|
||||
"funnel",
|
||||
"hopper",
|
||||
"spotlight",
|
||||
"searchlight"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"maths"
|
||||
]
|
||||
}
|
||||
14
icons/cone.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="m20.9 18.55-8-15.98a1 1 0 0 0-1.8 0l-8 15.98" />
|
||||
<ellipse cx="12" cy="19" rx="9" ry="3" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 312 B |
@@ -18,10 +18,12 @@
|
||||
"divide",
|
||||
"division",
|
||||
"split",
|
||||
"or",
|
||||
"/"
|
||||
],
|
||||
"categories": [
|
||||
"text",
|
||||
"development",
|
||||
"maths"
|
||||
]
|
||||
}
|
||||
@@ -10,5 +10,5 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9 9.35a4 4 0 1 1 0 5.3" />
|
||||
<path d="M9 9.4a4 4 0 1 1 0 5.25" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 283 B After Width: | Height: | Size: 283 B |
@@ -10,5 +10,5 @@
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M15 9.354a4 4 0 1 0 0 5.292" />
|
||||
<path d="M15 9.4a4 4 0 1 0 0 5.246" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 285 B |
17
icons/cuboid.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"brick",
|
||||
"block",
|
||||
"container",
|
||||
"storage",
|
||||
"geometry",
|
||||
"rectangular",
|
||||
"hexahedron"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"maths",
|
||||
"buildings"
|
||||
]
|
||||
}
|
||||
15
icons/cuboid.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="m21.12 6.4-6.05-4.06a2 2 0 0 0-2.17-.05L2.95 8.41a2 2 0 0 0-.95 1.7v5.82a2 2 0 0 0 .88 1.66l6.05 4.07a2 2 0 0 0 2.17.05l9.95-6.12a2 2 0 0 0 .95-1.7V8.06a2 2 0 0 0-.88-1.66Z" />
|
||||
<path d="M10 22v-8L2.25 9.15" />
|
||||
<path d="m10 14 11.77-6.87" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 464 B |
17
icons/cylinder.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"shape",
|
||||
"elliptical",
|
||||
"geometry",
|
||||
"container",
|
||||
"storage",
|
||||
"tin",
|
||||
"pot"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"design",
|
||||
"maths"
|
||||
]
|
||||
}
|
||||
14
icons/cylinder.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"
|
||||
>
|
||||
<ellipse cx="12" cy="5" rx="9" ry="3" />
|
||||
<path d="M3 5v14a9 3 0 0 0 18 0V5" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 291 B |
@@ -7,6 +7,9 @@
|
||||
"tags": [
|
||||
"storage",
|
||||
"memory",
|
||||
"container",
|
||||
"tin",
|
||||
"pot",
|
||||
"bytes",
|
||||
"servers"
|
||||
],
|
||||
@@ -14,4 +17,4 @@
|
||||
"devices",
|
||||
"development"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
20
icons/diameter.json
Normal file
@@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"shape",
|
||||
"circle",
|
||||
"geometry",
|
||||
"trigonometry",
|
||||
"width",
|
||||
"height",
|
||||
"size",
|
||||
"calculate",
|
||||
"measure"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"maths",
|
||||
"design",
|
||||
"tools"
|
||||
]
|
||||
}
|
||||
17
icons/diameter.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="19" cy="19" r="2" />
|
||||
<circle cx="5" cy="5" r="2" />
|
||||
<path d="M6.48 3.66a10 10 0 0 1 13.86 13.86" />
|
||||
<path d="m6.41 6.41 11.18 11.18" />
|
||||
<path d="M3.66 6.48a10 10 0 0 0 13.86 13.86" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 414 B |
22
icons/drafting-compass.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"tags": [
|
||||
"geometry",
|
||||
"trigonometry",
|
||||
"radius",
|
||||
"diameter",
|
||||
"circumference",
|
||||
"calculate",
|
||||
"measure",
|
||||
"arc",
|
||||
"curve",
|
||||
"draw",
|
||||
"sketch"
|
||||
],
|
||||
"categories": [
|
||||
"shapes",
|
||||
"maths",
|
||||
"design",
|
||||
"tools"
|
||||
]
|
||||
}
|
||||
17
icons/drafting-compass.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="12" cy="5" r="2" />
|
||||
<path d="m3 21 8.02-14.26" />
|
||||
<path d="m12.99 6.74 1.93 3.44" />
|
||||
<path d="M19 12c-3.87 4-10.13 4-14 0" />
|
||||
<path d="m21 21-2.16-3.84" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 386 B |
17
icons/drama.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"drama",
|
||||
"masks",
|
||||
"theater",
|
||||
"theatre",
|
||||
"entertainment",
|
||||
"show"
|
||||
],
|
||||
"categories": [
|
||||
"multimedia"
|
||||
]
|
||||
}
|
||||
20
icons/drama.svg
Normal file
@@ -0,0 +1,20 @@
|
||||
<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="M 10 11h.01"/>
|
||||
<path d="M 14 6h.01"/>
|
||||
<path d="M 18 6h.01"/>
|
||||
<path d="M 6.5 13.1h.01"/>
|
||||
<path d="M22 5c0 9-4 12-6 12s-6-3-6-12c0-2 2-3 6-3s6 1 6 3"/>
|
||||
<path d="M17.4 9.9c-.8.8-2 .8-2.8 0"/>
|
||||
<path d="M10.1 7.1C9 7.2 7.7 7.7 6 8.6c-3.5 2-4.7 3.9-3.7 5.6 4.5 7.8 9.5 8.4 11.2 7.4.9-.5 1.9-2.1 1.9-4.7"/>
|
||||
<path d="M9.1 16.5c.3-1.1 1.4-1.7 2.4-1.4"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 578 B |
@@ -12,5 +12,8 @@
|
||||
"categories": [
|
||||
"design",
|
||||
"files"
|
||||
],
|
||||
"aliases": [
|
||||
"file-axis-3-d"
|
||||
]
|
||||
}
|
||||
@@ -2,11 +2,16 @@
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"colebemis",
|
||||
"ericfennis"
|
||||
"ericfennis",
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"movie",
|
||||
"video"
|
||||
"video",
|
||||
"reel",
|
||||
"camera",
|
||||
"cinema",
|
||||
"entertainment"
|
||||
],
|
||||
"categories": [
|
||||
"photography",
|
||||
|
||||
@@ -9,12 +9,12 @@
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<rect width="20" height="20" x="2" y="2" rx="2.18" ry="2.18" />
|
||||
<line x1="7" x2="7" y1="2" y2="22" />
|
||||
<line x1="17" x2="17" y1="2" y2="22" />
|
||||
<line x1="2" x2="22" y1="12" y2="12" />
|
||||
<line x1="2" x2="7" y1="7" y2="7" />
|
||||
<line x1="2" x2="7" y1="17" y2="17" />
|
||||
<line x1="17" x2="22" y1="17" y2="17" />
|
||||
<line x1="17" x2="22" y1="7" y2="7" />
|
||||
<rect width="18" height="18" x="3" y="3" rx="2" />
|
||||
<path d="M7 3v18" />
|
||||
<path d="M3 7.5h4" />
|
||||
<path d="M3 12h18" />
|
||||
<path d="M3 16.5h4" />
|
||||
<path d="M17 3v18" />
|
||||
<path d="M17 7.5h4" />
|
||||
<path d="M17 16.5h4" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 562 B After Width: | Height: | Size: 432 B |
22
icons/flame-kindling.json
Normal file
@@ -0,0 +1,22 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"campfire",
|
||||
"camping",
|
||||
"wilderness",
|
||||
"outdoors",
|
||||
"lit",
|
||||
"warmth",
|
||||
"wood",
|
||||
"twigs",
|
||||
"sticks"
|
||||
],
|
||||
"categories": [
|
||||
"nature",
|
||||
"social",
|
||||
"gaming"
|
||||
]
|
||||
}
|
||||
15
icons/flame-kindling.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="M12 2c1 3 2.5 3.5 3.5 4.5A5 5 0 0 1 17 10a5 5 0 1 1-10 0c0-.3 0-.6.1-.9a2 2 0 1 0 3.3-2C8 4.5 11 2 12 2Z" />
|
||||
<path d="m5 22 14-4" />
|
||||
<path d="m5 18 14 4" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 380 B |
21
icons/fullscreen.json
Normal file
@@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "../icon.schema.json",
|
||||
"contributors": [
|
||||
"danielbayley"
|
||||
],
|
||||
"tags": [
|
||||
"expand",
|
||||
"zoom",
|
||||
"preview",
|
||||
"focus",
|
||||
"camera",
|
||||
"lens",
|
||||
"image"
|
||||
],
|
||||
"categories": [
|
||||
"layout",
|
||||
"multimedia",
|
||||
"design",
|
||||
"photography"
|
||||
]
|
||||
}
|
||||
17
icons/fullscreen.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="M3 7V5a2 2 0 0 1 2-2h2" />
|
||||
<path d="M17 3h2a2 2 0 0 1 2 2v2" />
|
||||
<path d="M21 17v2a2 2 0 0 1-2 2h-2" />
|
||||
<path d="M7 21H5a2 2 0 0 1-2-2v-2" />
|
||||
<rect width="10" height="8" x="7" y="8" rx="1" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 418 B |