@solar-icons/vue 2.0.0-beta.1 → 2.0.0-beta.3

package/README.md

@@ -1,109 +1,58 @@
 # @solar-icons/vue
 
-Solar Icons for Vue 3. Supports dynamic styles and global configuration.
+Vue components for Solar Icons. This package provides 7,476 SVG icons across 6 styles (Bold, Broken, Linear, Outline, Bold Duotone, Line Duotone), optimized for Vue applications.
 
-## Installation
+## Features
 
-```bash
+- **7,476 SVGs:** 1,246 unique icons in 6 styles. Designed by 480 Design.
+- **Tree-shakeable:** Import only the icons you use.
+- **Global configuration:** Set defaults for size, color, and stroke width using `<SolarProvider>`.
+- **Customizable:** Override size, color, and stroke width per icon via props or CSS variables.
+- **Duotone support:** Secondary color controls for `bold-duotone` and `line-duotone` styles.
+- **TypeScript:** Typed components and props.
+
+## Install
+
+```sh
 npm install @solar-icons/vue
 ```
 
 ## Usage
 
-Import and render components:
-
 ```vue
+<script setup>
+import { HomeIcon, LoginIcon } from '@solar-icons/vue/linear'
+</script>
+
 <template>
     <div>
-        <ArrowUp :size="24" weight="Outline" :mirrored="true" />
-        <Arrows.AltArrowLeft color="#fff" class="bg-black" weight="Bold" />
+        <HomeIcon />
+        <LoginIcon color="#3b82f6" :size="32" :strokeWidth="2" />
     </div>
 </template>
-
-<script setup>
-import { ArrowUp } from '@solar-icons/vue'
-import { Arrows } from '@solar-icons/vue/category'
-</script>
 ```
 
-### Props
+### Global Configuration (Provider)
 
-Icon components accept standard HTML SVG attributes alongside these props:
-
-- **`size`**: Width and height (e.g., `24`, `"1.5em"`, default: `24`).
-- **`color`**: Icon color (e.g., `"#000"`, `"currentColor"`, default: `"currentColor"`).
-- **`weight`**: Icon style variant (`"Bold"`, `"Linear"`, `"Outline"`, `"BoldDuotone"`, `"LineDuotone"`, or `"Broken"`, default: `"Linear"`).
-- **`mirrored`**: Flips the icon horizontally when `true` (default: `false`).
-- **`alt`**: Accessibility title.
-
-## Advanced Usage
-
-### Global Configuration
-
-Set default styles globally using `SolarProvider`:
+Wrap your application root in `<SolarProvider>` to set default properties:
 
 ```vue
-<template>
-    <SolarProvider :size="32" color="purple" weight="Linear">
-        <YourComponents />
-    </SolarProvider>
-</template>
-
 <script setup>
 import { SolarProvider } from '@solar-icons/vue'
+import { HomeIcon } from '@solar-icons/vue/linear'
 </script>
-```
 
-### Vue Plugin
-
-Alternatively, configure defaults globally via the Vue plugin:
-
-```js
-import { createApp } from 'vue'
-import { SolarIconsPlugin } from '@solar-icons/vue'
-
-const app = createApp(App)
-app.use(SolarIconsPlugin, {
-    color: 'currentColor',
-    size: '24',
-    weight: 'Linear',
-    mirrored: false,
-})
-app.mount('#app')
-```
-
-### Composition API
-
-Access and modify settings dynamically using `useSolar`:
-
-```vue
 <template>
-    <div>
-        <ArrowUp :size="iconSize" weight="Outline" />
-        <button @click="increaseSize">Resize</button>
-    </div>
+    <SolarProvider :size="24" color="currentColor" :strokeWidth="1.5">
+        <HomeIcon />
+    </SolarProvider>
 </template>
-
-<script setup>
-import { ref } from 'vue'
-import { ArrowUp, useSolar } from '@solar-icons/vue'
-
-const { config, setSize } = useSolar()
-const iconSize = ref(24)
-
-const increaseSize = () => {
-    const newSize = parseInt(iconSize.value) + 4
-    iconSize.value = newSize
-    setSize(newSize)
-}
-</script>
 ```
 
-## License
+## Documentation
 
-- **Code**: MIT
-- **Icons**: CC BY 4.0 by [480 Design](https://www.figma.com/community/file/1166831539721848736) (requires attribution)
+For installation guides, API reference, and a searchable icon catalog, visit the [Vue Documentation](https://solar-icons.vercel.app/docs/v2/frameworks/vue).
 
----
+## License
 
-For detailed documentation, visit [solar-icons.vercel.app](https://solar-icons.vercel.app).
+MIT License. Icons by 480 Design (CC BY 4.0).

package/dist/lib/IconBase.mjs

@@ -1 +1 @@
-import{computed as e,createCommentVNode as t,createElementBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,toDisplayString as s,useAttrs as c}from"vue";const l=[`width`,`height`,`color`,`stroke-width`,`aria-hidden`],u={key:0},d=`solar`,f=r({__name:`IconBase`,props:{alt:{},color:{},size:{},strokeWidth:{},secondaryColor:{},secondaryOpacity:{},iconName:{},isolated:{type:Boolean}},setup(r){let f=r,p=c(),m=e(()=>f.iconName?`${d} solar-${f.iconName}`:d),h=e(()=>!!f.alt||p[`aria-label`]!==void 0||p.title!==void 0),g=e(()=>{let e={};if(f.isolated&&(e[`--solar-secondary-color`]=`initial`,e[`--solar-secondary-opacity`]=`initial`),f.color!==void 0&&(e.color=f.color),f.size!==void 0){let t=typeof f.size==`number`?`${f.size}px`:f.size;e.width=t,e.height=t}return f.strokeWidth!==void 0&&(e[`stroke-width`]=String(f.strokeWidth)),f.secondaryColor&&(e[`--solar-secondary-color`]=f.secondaryColor),f.secondaryOpacity!=null&&(e[`--solar-secondary-opacity`]=String(f.secondaryOpacity)),e}),_=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`var(--solar-size, 24px)`}),v=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`var(--solar-size, 24px)`}),y=e(()=>{if(f.color===void 0)return f.isolated?`currentColor`:`var(--solar-color, currentColor)`}),b=e(()=>{if(f.strokeWidth===void 0)return f.isolated?`1.5`:`var(--solar-stroke-width, 1.5)`});return(e,c)=>(a(),n(`svg`,i({xmlns:`http://www.w3.org/2000/svg`},e.$attrs,{class:m.value,style:Object.keys(g.value).length>0?g.value:void 0,fill:`none`,viewBox:`0 0 24 24`,width:_.value,height:v.value,color:y.value,"stroke-width":b.value,"aria-hidden":h.value?void 0:`true`}),[r.alt?(a(),n(`title`,u,s(r.alt),1)):t(`v-if`,!0),o(e.$slots,`default`)],16,l))}});export{f as default};
+import{computed as e,createCommentVNode as t,createElementBlock as n,defineComponent as r,mergeProps as i,openBlock as a,renderSlot as o,toDisplayString as s,useAttrs as c}from"vue";const l=[`width`,`height`,`color`,`stroke-width`,`aria-hidden`],u={key:0},d=`solar`,f=r({__name:`IconBase`,props:{alt:{},color:{},size:{},strokeWidth:{},secondaryColor:{},secondaryOpacity:{},iconName:{},isolated:{type:Boolean}},setup(r){let f=r,p=c(),m=e(()=>f.iconName?`${d} solar-${f.iconName}`:d),h=e(()=>!!f.alt||p[`aria-label`]!==void 0||p.title!==void 0),g=e(()=>{let e={};if(f.isolated&&(e[`--solar-secondary-color`]=`initial`,e[`--solar-secondary-opacity`]=`initial`),f.color!==void 0&&(e.color=f.color),f.size!==void 0){let t=typeof f.size==`number`?`${f.size}px`:f.size;e.width=t,e.height=t}return f.strokeWidth!==void 0&&(e[`stroke-width`]=String(f.strokeWidth)),f.secondaryColor&&(e[`--solar-secondary-color`]=f.secondaryColor),f.secondaryOpacity!=null&&(e[`--solar-secondary-opacity`]=String(f.secondaryOpacity)),f.size===void 0&&!f.isolated&&!e.fontSize&&!e[`font-size`]&&(e.fontSize=`var(--solar-size, 24px)`),e}),_=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`1em`}),v=e(()=>{if(f.size===void 0)return f.isolated?`24px`:`1em`}),y=e(()=>{if(f.color===void 0)return f.isolated?`currentColor`:`var(--solar-color, currentColor)`}),b=e(()=>{if(f.strokeWidth===void 0)return f.isolated?`1.5`:`var(--solar-stroke-width, 1.5)`});return(e,c)=>(a(),n(`svg`,i({xmlns:`http://www.w3.org/2000/svg`},e.$attrs,{class:m.value,style:Object.keys(g.value).length>0?g.value:void 0,fill:`none`,viewBox:`0 0 24 24`,width:_.value,height:v.value,color:y.value,"stroke-width":b.value,"aria-hidden":h.value?void 0:`true`}),[r.alt?(a(),n(`title`,u,s(r.alt),1)):t(`v-if`,!0),o(e.$slots,`default`)],16,l))}});export{f as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@solar-icons/vue",
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.3",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -87,7 +87,7 @@
     "vitest": "^4.1.10",
     "vue": "^3.5.39",
     "vue-tsc": "3.3.7",
-    "@solar-icons/core": "2.0.0-beta.0"
+    "@solar-icons/core": "2.0.0-beta.1"
   },
   "license": "MIT",
   "scripts": {