@solar-icons/vue

The @solar-icons/vue package provides a robust, flexible, and easy-to-use library of Vue components for the Solar icon set. This package enables developers to seamlessly integrate Solar's multi-style icons into Vue applications. While this package is compatible with Nuxt, Nuxt users should consider using the dedicated @solar-icons/nuxt package for deeper integration with the Nuxt ecosystem.

Installation

Install the package using npm, pnpm or yarn for Vue applications:

npm install @solar-icons/vue

Note for Nuxt users: For enhanced Nuxt integration with auto-import capabilities and optimized performance, consider using the dedicated @solar-icons/nuxt package instead.

Usage

Basic Vue Usage

To use an icon in your Vue application, simply import it from the package:

<template>
    <div>
        <ArrowUp :size="24" weight="Outline" :mirrored="true" /> 
         
        <solar.Arrows.ArrowDown
            :size="32"
            weight="BoldDuotone" 
        />
        
        <Arrows.AltArrowLeft
            color="#fff"
            class="bg-black"
            weight="Bold" 
        />
    </div>
</template>
<script setup>
import { ArrowUp } from '@solar-icons/vue'
import solar from '@solar-icons/vue/category'
import { Arrows } from '@solar-icons/vue/category'
</script>

Properties

Each icon component supports the following properties:

• size: Defines the size of the icon (e.g., 24, "1.5em").
• color: Sets the color of the icon (e.g., "#000", "currentColor").
• weight: Specifies the icon style. Options include "Bold", "Linear", "Outline", "BoldDuotone", "LineDuotone", and "Broken".
• mirrored: Flips the icon horizontally when set to true.
• alt: Provides alternative text for accessibility.

Advanced Usage

Global Icon Configuration

To apply consistent styles across multiple icons, use the SolarProvider component to wrap your application:

<template>
     <SolarProvider :size="32" color="purple" weight="Linear"> <YourComponents /> </SolarProvider>
</template>
<script setup>
import { SolarProvider } from '@solar-icons/vue'
</script>

Using the Vue Plugin

Alternatively, you can install the package as a Vue plugin:

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')

Using Composition API

You can also access and modify the icon configuration using the Composition API:

<template>
    <div>
         <ArrowUp :size="iconSize" weight="Outline" /> <button @click="increaseSize">
             Increase Size</button
        >
    </div>
</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>

Contributing

As an open-source project, contributions are welcome. However, please note that while the Solar project is maintained by a single developer, we encourage anyone interested to contribute through pull requests and issues.

License

This library is licensed under the MIT License, making it free for both personal and commercial use. However, the Solar icon pack is licensed under CC BY 4.0 by 480 Design, which allows commercial use with attribution. Please visit 480 Design's Figma page to explore the original icon set or see the LICENSE-THIRD-PARTY file.

Acknowledgements

Special thanks to 480 Design for creating the original Solar icon pack. Additional appreciation goes to Phosphor Icons and Lucide Icons for their inspiration in shaping the structure and approach of the @solar-icons packages.

For detailed documentation and examples, refer to the project's main documentation.