From 9d52dac7f2f699418415605203bc068fc33db0f2 Mon Sep 17 00:00:00 2001 From: Shinichi Okada Date: Wed, 12 Jul 2023 13:04:52 +0200 Subject: [PATCH] feat: add docs --- README.md | 4 +- package.json | 1 + pnpm-lock.yaml | 41 ++++++ src/app.postcss | 28 ++++ src/routes/+layout.svelte | 22 ++- src/routes/+page.svelte | 2 +- src/routes/docs/+page.md | 228 ++++++++++++++++++++++++++++++++ src/routes/outline/+page.svelte | 2 +- src/routes/solid/+page.svelte | 2 +- svelte.config.js | 11 +- 10 files changed, 333 insertions(+), 8 deletions(-) create mode 100644 src/routes/docs/+page.md diff --git a/README.md b/README.md index 5dd7776c..0ddc7262 100644 --- a/README.md +++ b/README.md @@ -65,9 +65,9 @@ To avoid any complaints from the editor, add `node16` or `nodenext` to `moduleRe ```json { - //... + "compilerOptions": { - // ... + "moduleResolution": "nodenext" } } diff --git a/package.json b/package.json index 292a37ea..95dae060 100644 --- a/package.json +++ b/package.json @@ -50,6 +50,7 @@ "eslint-plugin-svelte": "^2.31.0", "flowbite": "^1.6.6", "flowbite-svelte": "^0.38.5", + "mdsvex": "^0.11.0", "postcss": "^8.4.24", "postcss-load-config": "^4.0.1", "prettier": "^2.8.8", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 394a080b..322e869e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -44,6 +44,9 @@ devDependencies: flowbite-svelte: specifier: ^0.38.5 version: 0.38.5(svelte@4.0.0) + mdsvex: + specifier: ^0.11.0 + version: 0.11.0(svelte@4.0.0) postcss: specifier: ^8.4.24 version: 8.4.24 @@ -556,6 +559,10 @@ packages: resolution: {integrity: sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==} dev: true + /@types/unist@2.0.7: + resolution: {integrity: sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==} + dev: true + /@typescript-eslint/eslint-plugin@5.60.1(@typescript-eslint/parser@5.60.1)(eslint@8.43.0)(typescript@5.1.3): resolution: {integrity: sha512-KSWsVvsJsLJv3c4e73y/Bzt7OpqMCADUO846bHcuWYSYM19bldbAeDv7dYyV0jwkbMfJ2XdlzwjhXtuD7OY6bw==} engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} @@ -1703,6 +1710,18 @@ packages: resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} dev: true + /mdsvex@0.11.0(svelte@4.0.0): + resolution: {integrity: sha512-gJF1s0N2nCmdxcKn8HDn0LKrN8poStqAicp6bBcsKFd/zkUBGLP5e7vnxu+g0pjBbDFOscUyI1mtHz+YK2TCDw==} + peerDependencies: + svelte: '>=3 <5' + dependencies: + '@types/unist': 2.0.7 + prism-svelte: 0.4.7 + prismjs: 1.29.0 + svelte: 4.0.0 + vfile-message: 2.0.4 + dev: true + /merge2@1.4.1: resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} engines: {node: '>= 8'} @@ -2116,6 +2135,15 @@ packages: react-is: 17.0.2 dev: true + /prism-svelte@0.4.7: + resolution: {integrity: sha512-yABh19CYbM24V7aS7TuPYRNMqthxwbvx6FF/Rw920YbyBWO3tnyPIqRMgHuSVsLmuHkkBS1Akyof463FVdkeDQ==} + dev: true + + /prismjs@1.29.0: + resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==} + engines: {node: '>=6'} + dev: true + /publint@0.1.12: resolution: {integrity: sha512-8LxkO430t/SOhUl0qXQWdXq34m6oyLcPhE4Kc8eXhOEnB82vCHcShPQ2kH53n/ksC7jWdRWDP7MPGxKJbntQfg==} engines: {node: '>=16'} @@ -2628,6 +2656,12 @@ packages: busboy: 1.6.0 dev: true + /unist-util-stringify-position@2.0.3: + resolution: {integrity: sha512-3faScn5I+hy9VleOq/qNbAd6pAx7iH5jYBMS9I1HgQVijz/4mv5Bvw5iw1sC/90CODiKo81G/ps8AJrISn687g==} + dependencies: + '@types/unist': 2.0.7 + dev: true + /update-browserslist-db@1.0.11(browserslist@4.21.9): resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==} hasBin: true @@ -2649,6 +2683,13 @@ packages: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} dev: true + /vfile-message@2.0.4: + resolution: {integrity: sha512-DjssxRGkMvifUOJre00juHoP9DPWuzjxKuMDrhNbk2TdaYYBNMStsNhEOt3idrtI12VQYM/1+iM0KOzXi4pxwQ==} + dependencies: + '@types/unist': 2.0.7 + unist-util-stringify-position: 2.0.3 + dev: true + /vite-node@0.32.2(@types/node@20.3.2): resolution: {integrity: sha512-dTQ1DCLwl2aEseov7cfQ+kDMNJpM1ebpyMMMwWzBvLbis8Nla/6c9WQcqpPssTwS6Rp/+U6KwlIj8Eapw4bLdA==} engines: {node: '>=v14.18.0'} diff --git a/src/app.postcss b/src/app.postcss index 1a7b7cf3..ee850f74 100644 --- a/src/app.postcss +++ b/src/app.postcss @@ -2,3 +2,31 @@ @tailwind base; @tailwind components; @tailwind utilities; + +h1, h2, h3, p, ul, li, table{ + @apply dark:text-white; +} + +h1 { + @apply text-3xl my-8; +} + +h2 { + @apply text-2xl my-6; +} + +h3 { + @apply text-xl my-5; +} + +p { + @apply text-lg my-3; +} + +a { + @apply text-blue-900 dark:text-blue-400 hover:underline; +} + +pre { + @apply bg-gray-100 text-gray-900 dark:text-gray-900 m-4 p-4; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index ca79438d..1cf4cbc7 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,6 +7,10 @@ import NavLi from 'flowbite-svelte/NavLi.svelte'; import NavUl from 'flowbite-svelte/NavUl.svelte'; import NavHamburger from 'flowbite-svelte/NavHamburger.svelte'; + import Footer from 'flowbite-svelte/Footer.svelte' + import FooterCopyright from 'flowbite-svelte/FooterCopyright.svelte' + import FooterLinkGroup from 'flowbite-svelte/FooterLinkGroup.svelte' + import FooterLink from 'flowbite-svelte/FooterLink.svelte' import { MetaTags } from 'svelte-meta-tags'; $: activeUrl = $page.url.pathname; @@ -43,10 +47,24 @@ Home Outline Solid - Docs + Docs GitHub Icon sets - +
+ +
+ + +
+ + + Outline + Solid + Docs + Licensing + GitHub + +
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index e151c018..cbd825f1 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -22,7 +22,7 @@ $: filteredEntries = Object.entries(Icons).filter(([name, component]) => { return name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1; }); - let divClass = 'mx-16'; + let divClass = ''; + + + +# Flowbite Svelte Icons + +
+ +npm +Created by Shin Okada +License +npm +
+ + +480+ SVG [Flowbite icons](https://github.com/themesberg/flowbite-icons) components for Svelte. + +Thank you for considering my open-source package. If you use it in a commercial project, please support me by sponsoring me on GitHub: https://github.com/sponsors/shinokada. Your support helps me maintain and improve this package for the benefit of the community. + +## Repo + +GitHub Repo + + +## Installation + +```sh +npm i -D flowbite-svelte-icons +``` + + +## Usages + +In a svelte file: + +```html + + + +``` + +## Faster compiling + +If you need only a few icons from this library in your Svelte app, import them directly. This can optimize compilation speed and improve performance by reducing the amount of code processed during compilation. + +```html + + + +``` + +If you are a TypeScript user, install **typescript version 5.0.0 or above**. + +```sh +pnpm i -D typescript@latest +``` + +To avoid any complaints from the editor, add `node16` or `nodenext` to `moduleResolution` in your tsconfig.json file. + +```json +{ + // more config + "compilerOptions": { + // more config + "moduleResolution": "nodenext" + } +} +``` + +## Props + +### Outline + +- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'; +- role: string = 'img'; +- strokeLinecap: 'round' | 'inherit' | 'butt' | 'square' | null | undefined = 'round'; +- strokeLinejoin: 'round' | 'inherit' | 'miter' | 'bevel' | null | undefined = 'round'; +- strokeWidth = '2'; +- ariaLabel = 'icon file name'; + +### Solid + +- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md'; +- role: string = 'img'; +- ariaLabel = 'icon file name'; + +## IDE support + +If you are using an LSP-compatible editor, such as VSCode, Atom, Sublime Text, or Neovim, hovering over a component name will display a documentation link, features, props, events, and an example. + +## Size + +The following table provides details about the available sizes for icons: + +|Size| CSS Classes| +|--|--| +|xs| 'w-3 h-3'| +|sm |'w-4 h-4'| +|md |'w-5 h-6'| +|lg |'w-6 h-6'| +|xl |'w-8 h-8'| + + +To change the size of an icon, use the `size` prop and specify the desired size. For example: + +```html + +``` + +If you want to override the preconfigured size, you can add a custom size using Tailwind CSS by including the desired classes in the `class` prop. For example: + +```html + +``` + +## Color + +You can apply Tailwind CSS color directly to the icon component or its parent tag using the `class` prop. + +```html + + +
+ +
+``` + +## Dark mode + +If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the `class` prop. + +Let's use `dark` for the dark mode class as an example. + +```html + +``` + +## aria-label + +All icons have aria-label. For example `BxAbacus` has `aria-label="bx abacus"`. +Use `ariaLabel` prop to modify the `aria-label` value. + +```html + +``` + +## Unfocusable icon + +If you want to make an icon unfocusable, add `tabindex="-1"`. + +```html + +``` + +## Events + +All icons have the following events: + +- on:click +- on:keydown +- on:keyup +- on:focus +- on:blur +- on:mouseenter +- on:mouseleave +- on:mouseover +- on:mouseout + +## Passing down other attributes + +You can pass other attibutes as well. + +```html + +``` + +## Using svelte:component + +```html + + + +``` + +## Using onMount + +```html + +``` + +## Import all + +Use `import * as Icon from 'flowbite-svelte-icons`. + +```html + + + + +

Size

+ + +

Tailwind CSS

+ +``` + +## Other icons + +- [Svelte-Icon-Sets](https://svelte-svg-icons.vercel.app/) + diff --git a/src/routes/outline/+page.svelte b/src/routes/outline/+page.svelte index 5fa0b73e..dc852b44 100644 --- a/src/routes/outline/+page.svelte +++ b/src/routes/outline/+page.svelte @@ -21,7 +21,7 @@ $: filteredEntries = Object.entries(Icons).filter(([name, component]) => { return name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1; }); - let divClass = 'mx-16'; + let divClass = ''; { return name.toLowerCase().indexOf(searchTerm.toLowerCase()) !== -1; }); - let divClass = 'mx-16'; + let divClass = '';