mirror of
https://github.com/lucide-icons/lucide.git
synced 2025-12-17 19:47:41 +01:00
c9101f0f39
* add sidebar topics * Start with styling icons doc * write some doc text * add sandpack * Add custom sandpack theme * Adjust sandpack * update sidebar * Add example * Add more examples * updat lockfile * update vitepress * Fix sidebar * Adjust theme with latest vitepress! * Example updates! * Finish last examples * Remove markdown comments * Update docs/guide/advanced/filled-icons.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/color.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/sizing.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Update docs/guide/basics/stroke-width.md Co-authored-by: Jakob Guddas <github@jguddas.de> * Process feedback * Add editor width percentage * process feedback --------- Co-authored-by: Jakob Guddas <github@jguddas.de>
1.8 KiB
1.8 KiB
<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>
Adjusting stroke width with
Adjusting stroke width with
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
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.