From 5366782da01299a816bb7fc04a683d5b2e2e40af Mon Sep 17 00:00:00 2001 From: Eric Fennis Date: Sun, 24 Dec 2023 13:29:05 +0100 Subject: [PATCH] Adding documentation about Global Styling (#1721) * Add global styling docs * Add global styling and filled icon docs * Fix typos global-styling.md * Update filled-icons.md --- docs/.vitepress/sidebar.ts | 56 ++++++++++--------- docs/.vitepress/theme/style.css | 4 ++ .../examples/filled-icon-example/App.js | 23 ++++++++ .../examples/filled-icon-example/files.ts | 20 +++++++ .../examples/filled-icon-example/icon.css | 14 +++++ .../App.js | 30 ++++++++++ .../files.ts | 20 +++++++ .../icon.css | 16 ++++++ .../global-styling-css-example/App.js | 30 ++++++++++ .../global-styling-css-example/files.ts | 20 +++++++ .../global-styling-css-example/icon.css | 14 +++++ docs/guide/advanced/filled-icons.md | 24 +++++++- docs/guide/advanced/global-styling.md | 55 ++++++++++++++++++ 13 files changed, 296 insertions(+), 30 deletions(-) create mode 100644 docs/guide/advanced/examples/filled-icon-example/App.js create mode 100644 docs/guide/advanced/examples/filled-icon-example/files.ts create mode 100644 docs/guide/advanced/examples/filled-icon-example/icon.css create mode 100644 docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/App.js create mode 100644 docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/files.ts create mode 100644 docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css create mode 100644 docs/guide/advanced/examples/global-styling-css-example/App.js create mode 100644 docs/guide/advanced/examples/global-styling-css-example/files.ts create mode 100644 docs/guide/advanced/examples/global-styling-css-example/icon.css create mode 100644 docs/guide/advanced/global-styling.md diff --git a/docs/.vitepress/sidebar.ts b/docs/.vitepress/sidebar.ts index b79a0d00d..d7eec57a5 100644 --- a/docs/.vitepress/sidebar.ts +++ b/docs/.vitepress/sidebar.ts @@ -28,33 +28,35 @@ const sidebar: UserConfig['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: [ diff --git a/docs/.vitepress/theme/style.css b/docs/.vitepress/theme/style.css index bac3fb215..c09c0315b 100644 --- a/docs/.vitepress/theme/style.css +++ b/docs/.vitepress/theme/style.css @@ -153,6 +153,10 @@ html:has(* .outline-link:target) { scroll-behavior: smooth; } */ +.sp-wrapper + * { + margin-top: 24px; +} + .sp-wrapper .sp-layout { border-radius: 8px; } diff --git a/docs/guide/advanced/examples/filled-icon-example/App.js b/docs/guide/advanced/examples/filled-icon-example/App.js new file mode 100644 index 000000000..31ccdef4d --- /dev/null +++ b/docs/guide/advanced/examples/filled-icon-example/App.js @@ -0,0 +1,23 @@ +import { Star, StarHalf } from "lucide-react"; +import "./icon.css"; + +function App() { + return ( +
+
+
+ { Array.from({ length: 5 }, () => ( + + ))} +
+
+ + + +
+
+
+ ); +} + +export default App; diff --git a/docs/guide/advanced/examples/filled-icon-example/files.ts b/docs/guide/advanced/examples/filled-icon-example/files.ts new file mode 100644 index 000000000..d55b8c47d --- /dev/null +++ b/docs/guide/advanced/examples/filled-icon-example/files.ts @@ -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 diff --git a/docs/guide/advanced/examples/filled-icon-example/icon.css b/docs/guide/advanced/examples/filled-icon-example/icon.css new file mode 100644 index 000000000..b8aa18519 --- /dev/null +++ b/docs/guide/advanced/examples/filled-icon-example/icon.css @@ -0,0 +1,14 @@ +.star-rating { + position: relative; +} + +.stars { + display: flex; + gap: 4px; +} + +.rating { + position: absolute; + top: 0; +} + diff --git a/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/App.js b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/App.js new file mode 100644 index 000000000..8fe26aa1b --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/App.js @@ -0,0 +1,30 @@ +import { + TentTree, + Caravan, + FlameKindling, + MountainSnow, + Trees, + Axe, + Map, + CloudMoon, + Sparkles, +} from "lucide-react"; +import "./icon.css"; + +function App() { + return ( +
+ + + + + + + + + +
+ ); +} + +export default App; diff --git a/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/files.ts b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/files.ts new file mode 100644 index 000000000..c86c2bd1a --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/files.ts @@ -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 diff --git a/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css new file mode 100644 index 000000000..29d869df7 --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-absolute-strokewidth-example/icon.css @@ -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; +} diff --git a/docs/guide/advanced/examples/global-styling-css-example/App.js b/docs/guide/advanced/examples/global-styling-css-example/App.js new file mode 100644 index 000000000..e2f003605 --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-css-example/App.js @@ -0,0 +1,30 @@ +import { + CakeSlice, + Candy, + Apple, + Cookie, + Martini, + IceCream2, + Sandwich, + Wine, + Dessert, +} from "lucide-react"; +import "./icon.css"; + +function App() { + return ( +
+ + + + + + + + + +
+ ); +} + +export default App; diff --git a/docs/guide/advanced/examples/global-styling-css-example/files.ts b/docs/guide/advanced/examples/global-styling-css-example/files.ts new file mode 100644 index 000000000..c86c2bd1a --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-css-example/files.ts @@ -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 diff --git a/docs/guide/advanced/examples/global-styling-css-example/icon.css b/docs/guide/advanced/examples/global-styling-css-example/icon.css new file mode 100644 index 000000000..796d2db8f --- /dev/null +++ b/docs/guide/advanced/examples/global-styling-css-example/icon.css @@ -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; +} diff --git a/docs/guide/advanced/filled-icons.md b/docs/guide/advanced/filled-icons.md index 0d6afbb62..00575bdff 100644 --- a/docs/guide/advanced/filled-icons.md +++ b/docs/guide/advanced/filled-icons.md @@ -1,3 +1,9 @@ + + # 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: - - + ## 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). diff --git a/docs/guide/advanced/global-styling.md b/docs/guide/advanced/global-styling.md new file mode 100644 index 000000000..3e4f5834f --- /dev/null +++ b/docs/guide/advanced/global-styling.md @@ -0,0 +1,55 @@ + + +# 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. + + + +### 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. + + +