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

Adding documentation about Global Styling (#1721)

Browse Source 
* Add global styling docs

* Add global styling and filled icon docs

* Fix typos global-styling.md

* Update filled-icons.md
This commit is contained in:
Eric Fennis
2023-12-24 13:29:05 +01:00
committed by GitHub
parent 262f9e8865
commit 5366782da0
13 changed files with 296 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/.vitepress/sidebar.ts
+29 -27
View File
@@ -28,33 +28,35 @@ const sidebar: UserConfig<DefaultTheme.Config>['themeConfig']['sidebar'] = {
]
},
// TODO: Add this section
// {
// text: 'Advanced',
// items: [
// {
// text: 'Accessibility',
// link: '/guide/advanced/accessibility'
// },
// {
// text: 'Global styling',
// },
// {
// text: 'Animations',
// },
// {
// text: 'Filled icons',
// },
// {
// text: 'Combining icons',
// },
// {
// text: 'Dynamic imports'
// },
// // {
// // text: 'Auto importing'
// // },
// ]
// },
{
text: 'Advanced',
items: [
// {
// text: 'Accessibility',
// link: '/guide/advanced/accessibility'
// },
{
text: 'Global styling',
link: '/guide/advanced/global-styling'
},
// {
// text: 'Animations',
// },
{
text: 'Filled icons',
link: '/guide/advanced/filled-icons'
},
// {
// text: 'Combining icons',
// },
// {
// text: 'Dynamic imports'
// },
// {
// text: 'Auto importing'
// },
]
},
{
text: 'Packages',
items: [
docs/.vitepress/theme/style.css
+4
View File
@@ -153,6 +153,10 @@ html:has(* .outline-link:target) {
scroll-behavior: smooth;
} */
.sp-wrapper + * {
margin-top: 24px;
}
.sp-wrapper .sp-layout {
border-radius: 8px;
}
docs/guide/advanced/examples/filled-icon-example/App.js
+23
View File
@@ -0,0 +1,23 @@
import { Star, StarHalf } from "lucide-react";
import "./icon.css";
function App() {
return (
<div className="app">
<div className="star-rating">
<div className="stars">
{ Array.from({ length: 5 }, () => (
<Star fill="#111" strokeWidth={0} />
))}
</div>
<div className="stars rating">
<Star fill="yellow" strokeWidth={0} />
<Star fill="yellow" strokeWidth={0} />
<StarHalf fill="yellow" strokeWidth={0} />
</div>
</div>
</div>
);
}
export default App;
docs/guide/advanced/examples/filled-icon-example/files.ts
+20
View File
@@ -0,0 +1,20 @@
import App from './App.js?raw'
import styles from '../../../basics/examples/styles.css?raw'
import IconCss from './icon.css?raw'
const files = {
'App.js': {
code: App,
active: true,
},
'icon.css': {
code: IconCss,
readOnly: false,
},
'styles.css': {
code: styles,
hidden: true
},
}
export default files
docs/guide/advanced/examples/filled-icon-example/icon.css
+14
View File
@@ -0,0 +1,14 @@
.star-rating {
position: relative;
}
.stars {
display: flex;
gap: 4px;
}
.rating {
position: absolute;
top: 0;
}
docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/App.js
+30
View File
@@ -0,0 +1,30 @@
import {
TentTree,
Caravan,
FlameKindling,
MountainSnow,
Trees,
Axe,
Map,
CloudMoon,
Sparkles,
} from "lucide-react";
import "./icon.css";
function App() {
return (
<div className="app">
<TentTree />
<Caravan />
<FlameKindling />
<MountainSnow />
<Trees />
<Axe />
<Map />
<CloudMoon />
<Sparkles />
</div>
);
}
export default App;
docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/files.ts
+20
View File
@@ -0,0 +1,20 @@
import App from './App.js?raw'
import styles from '../../../basics/examples/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
docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css
+16
View File
@@ -0,0 +1,16 @@
.lucide {
width: 48px;
height: 48px;
stroke-width: 1.5;
}
.lucide * {
vector-effect: non-scaling-stroke;
}
.app {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr
gap: 6px;
}
docs/guide/advanced/examples/global-styling-css-example/App.js
+30
View File
@@ -0,0 +1,30 @@
import {
CakeSlice,
Candy,
Apple,
Cookie,
Martini,
IceCream2,
Sandwich,
Wine,
Dessert,
} from "lucide-react";
import "./icon.css";
function App() {
return (
<div className="app">
<CakeSlice />
<Candy />
<Apple />
<Cookie />
<Martini />
<IceCream2 />
<Sandwich />
<Wine />
<Dessert />
</div>
);
}
export default App;
docs/guide/advanced/examples/global-styling-css-example/files.ts
+20
View File
@@ -0,0 +1,20 @@
import App from './App.js?raw'
import styles from '../../../basics/examples/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
docs/guide/advanced/examples/global-styling-css-example/icon.css
+14
View File
@@ -0,0 +1,14 @@
.lucide {
/* Change this! */
color: #ffadff;
width: 56px;
height: 56px;
stroke-width: 1px;
}
.app {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr
gap: 6px;
}
docs/guide/advanced/filled-icons.md
+21 -3
View File
@@ -1,3 +1,9 @@
<script setup>
import { Sandpack } from 'sandpack-vue3'
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
import sizeIconExample from './examples/filled-icon-example/files.ts'
</script>
# Filled Icons
Fills are officially not supported.
@@ -5,9 +11,21 @@ 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 -->
<Sandpack
template="react"
:theme="sandpackTheme"
:files="sizeIconExample"
:customSetup='{
dependencies: {
"lucide-react": "latest"
}
}'
:options="{
editorHeight: 480,
editorWidthPercentage: 60,
}"
/>
## 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).
This feature has been requested several times and discussion is happening at [#458](https://github.com/lucide-icons/lucide/discussions/458).
docs/guide/advanced/global-styling.md
+55
View File
@@ -0,0 +1,55 @@
<script setup>
import { Sandpack } from 'sandpack-vue3'
import sandpackTheme from '../../.vitepress/theme/sandpackTheme.json'
import globalIconCssExample from './examples/global-styling-css-example/files.ts'
import globalAbsoluteStrokewidthExample from './examples/global-styling-absolute-strokewidth-example/files.ts'
</script>
# Global Styling
Adjusting icons can be done by [color](../basics/color.md), [size](../basics/sizing.md) and [stroke width](../basics/stroke-width.md).
By default, all icons have a **color** value of `currentColor`, a **size** value of `24px`, and a **stroke width** of `2`. Styling icons individually can be done by passing props to the icon component.
## Style by using CSS
Styling icons is easy to accomplish using CSS.
Every icon has a class attribute applied called `lucide`. This class name can be used in the CSS file to target all icons that are being used within the app.
- The **color** of the icons can be changed using the [`color`](https://developer.mozilla.org/en-US/docs/Web/CSS/color) CSS property.
- The **size** of the icons can be changed using [`width`](https://developer.mozilla.org/en-US/docs/Web/CSS/width) and [`height`](https://developer.mozilla.org/en-US/docs/Web/CSS/height) CSS properties.
- The **stroke width** of the icons can be changed using the [`stroke-width`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-width) CSS property.
<Sandpack
template="react"
:theme="sandpackTheme"
:files="globalIconCssExample"
:customSetup='{
dependencies: {
"lucide-react": "latest"
}
}'
:options="{
editorHeight: 300,
}"
/>
### Absolute stroke width
For global absolute stroke width styling the `vector-effect: non-scaling-stroke` CSS property can be applied to the children. This will keep the stroke-width the same size no matter the size of the icon. See [absolute-stroke-width](../basics/stroke-width.md#absolute-stroke-width) for more info.
<Sandpack
template="react"
:theme="sandpackTheme"
:files="globalAbsoluteStrokewidthExample"
:customSetup='{
dependencies: {
"lucide-react": "latest"
}
}'
:options="{
editorHeight: 300,
}"
/>