feat: add svelte context

themesberg · Sep 14, 2023 · ffcc230 · ffcc230
1 parent 89ced04
commit ffcc230
Show file tree

Hide file tree

Showing 557 changed files with 23,436 additions and 11,600 deletions.
diff --git a/README.md b/README.md
@@ -1,3 +1,7 @@
+---
+layout: mainLayout
+---
+
 # Flowbite Svelte Icons
 
 <div class="flex gap-2 my-8">
@@ -73,18 +77,18 @@ If you need only a few icons from this library in your Svelte app, import them d
 
 ### 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';
+- @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
+- @prop export let role = ctx.role || 'img';
+- @prop export let strokeLinecap: 'round' | 'inherit' | 'butt' | 'square' | null | undefined = ctx.strokeLinecap || 'round';
+- @prop export let strokeLinejoin: 'round' | 'inherit' | 'miter' | 'bevel' | null | undefined = ctx.strokeLinejoin || 'round';
+- @prop export let strokeWidth = ctx.strokeWidth || '2';
+- @prop export let ariaLabel = 'zoom in outline';
 
 ### Solid
 
-- size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = 'md';
-- role: string = 'img';
-- ariaLabel = 'icon file name';
+- @prop export let size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = ctx.size || 'md';
+- @prop export let role = ctx.role || 'img';
+- @prop export let ariaLabel = 'icon file name';
 
 ## IDE support
 
@@ -115,7 +119,45 @@ If you want to override the preconfigured size, you can add a custom size using
 <AddressCardSolid class="h-24 w-24 text-blue-700 mr-4" />
 ```
 
-## Creating a Default Global Icon Setting in Svelte
+## Setting Global Icon using setContext
+
+You can establish global icon preferences in your Svelte application using `setContext`. This allows you to configure icon-related properties once and share them across multiple components.
+
+In your `+layout.svelte` or `+page.svelte`, you can define and set global icon preferences as follows:
+
+```html
+<script>
+  import { setContext } from 'svelte';
+
+  // Define your global icon settings
+  const iconCtx = {
+    size: '100', // Icon size in pixels
+  };
+  setContext('iconCtx', iconCtx);
+</script>
+```
+
+The `size`, and `role` (for solid icons) and `size`, `role`, `strokeLinecap`, `strokeLinejoin`, `strokeWidth` (for outline icons) properties are optional, allowing you to fine-tune the appearance and accessibility of your icons as needed.
+If you set `size`, icons can be customized with different color. For example:
+
+```html
+<script>
+  import { setContext } from 'svelte';
+  import { AccountBookFilled } from 'svelte-ant-design-icons';
+  const iconCtx = {
+    size: '50'
+  };
+  setContext('iconCtx', iconCtx);
+</script>
+
+<AccountBookFilled color="#ff4488" />
+```
+
+Remember that you can set only one or more properties, allowing you to tailor icon settings to your specific design and accessibility requirements.
+
+Feel free to mix and match these properties as needed to create visually appealing and accessible icons in your Svelte application.
+
+## Creating a Default Icon Setting
 
 You can create a config file, `/src/lib/icon.config.json`.
 
@@ -171,7 +213,7 @@ In your Svelte page file, make use of the configurations from the JSON file:
 
 We import the configurations from the JSON file and assign them to config1 and config2. We then utilize the Icon component with the spread attributes `{...config1}` and `{...config2}` to apply the respective configurations to each icon.
 
-### Custom Default Icon
+## Custom Default Icon
 
 If you wish to create a custom default icon, you can follow these steps:
 
@@ -220,6 +262,14 @@ You can apply Tailwind CSS color directly to the icon component or its parent ta
 </div>
 ```
 
+## CSS HEX Colors
+
+Use the color attribute to change colors with HEX color code for Filled and Outlined components.
+
+```html
+<AddressCardSolid color="#ff0000" size="md"/> 
+```
+
 ## Dark mode
 
 If you are using the dark mode on your website with Tailwind CSS, add your dark mode class to the `class` prop.

diff --git a/mdsvex.config.js b/mdsvex.config.js
@@ -0,0 +1,16 @@
+import { defineMDSveXConfig as defineConfig } from 'mdsvex';
+
+const config = defineConfig({
+  layout: {
+    mainLayout: './src/routes/layout/+page.svelte'
+  },
+  extensions: ['.svelte.md', '.md', '.svx'],
+
+  smartypants: {
+    dashes: 'oldschool'
+  },
+
+  rehypePlugins: []
+});
+
+export default config;
diff --git a/package.json b/package.json
@@ -42,18 +42,18 @@
     "tailwindcss": "^3.3.2"
   },
   "devDependencies": {
-    "@floating-ui/dom": "^1.5.1",
-    "@playwright/test": "^1.37.1",
+    "@floating-ui/dom": "^1.5.3",
+    "@playwright/test": "^1.38.0",
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.24.1",
+    "@sveltejs/kit": "^1.25.0",
     "@sveltejs/package": "^2.2.2",
-    "@typescript-eslint/eslint-plugin": "^6.5.0",
-    "@typescript-eslint/parser": "^6.5.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.0",
+    "@typescript-eslint/parser": "^6.7.0",
     "autoprefixer": "^10.4.15",
-    "eslint": "^8.48.0",
+    "eslint": "^8.49.0",
     "eslint-config-prettier": "^9.0.0",
-    "eslint-plugin-svelte": "^2.33.0",
-    "flowbite-svelte": "^0.44.7",
+    "eslint-plugin-svelte": "^2.33.1",
+    "flowbite-svelte": "^0.44.15",
     "mdsvex": "^0.11.0",
     "postcss": "^8.4.29",
     "postcss-load-config": "^4.0.1",
@@ -62,15 +62,15 @@
     "publint": "^0.2.2",
     "svelte": "^4.2.0",
     "svelte-check": "^3.5.1",
-    "svelte-lib-helpers": "^0.3.10",
+    "svelte-lib-helpers": "^0.3.15",
     "svelte-meta-tags": "^3.0.3",
     "svelte-preprocess": "^5.0.4",
     "tailwind-merge": "^1.14.0",
     "tailwindcss": "^3.3.3",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
     "vite": "^4.4.9",
-    "vitest": "^0.34.3"
+    "vitest": "^0.34.4"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -2248,4 +2248,4 @@
       "svelte": "./dist/ZoomOutSolid.svelte"
     }
   }
-}
+}