open-index/open-npm huggingface dataset:
npm package: @selemondev/svgl-vue
Description: An optimized package with SVG logos to be used as Vue components ✨
Latest version: 2.0.5

<p align="center">
 <img align="center" src="https://svgl.app/library/svgl.svg" height="96" />
 <h1 align="center">
  Svgl Vue ✨
 </h1>
</p>


<!-- automd:badges color="green" license name="@selemondev/svgl-vue" packagephobia -->
[![CI](https://github.com/selemondev/svgl-vue/actions/workflows/ci.yml/badge.svg)](https://github.com/selemondev/svgl-vue/actions/workflows/ci.yml)
[![npm version](https://img.shields.io/npm/v/@selemondev/svgl-vue?color=green)](https://npmjs.com/package/@selemondev/svgl-vue)
[![npm downloads](https://img.shields.io/npm/dm/@selemondev/svgl-vue?color=green)](https://npm.chart.dev/@selemondev/svgl-vue)
[![install size](https://badgen.net/packagephobia/install/@selemondev/svgl-vue?color=green)](https://packagephobia.com/result?p=@selemondev/svgl-vue)

<!-- /automd -->


**Svgl Vue** is an open-source npm package that offers a collection of high-quality brand SVG logos as reusable **Vue components** with complete TypeScript support.

This package is powered by the official [`pheralb/svgl`](https://github.com/pheralb/svgl) repository.

## ✨ Features

- 💪 Fully typed Vue components.
- 🍃 Tree-shakable — only what you use will be bundled.

## 📦 Installation

<!-- automd:pm-install name="@selemondev/svgl-vue" -->

```sh
# ✨ Auto-detect
npx nypm install @selemondev/svgl-vue

# npm
npm install @selemondev/svgl-vue

# yarn
yarn add @selemondev/svgl-vue

# pnpm
pnpm install @selemondev/svgl-vue

# bun
bun install @selemondev/svgl-vue

# deno
deno install @selemondev/svgl-vue
```

<!-- /automd -->


## 🚀 Usage

Visit the [Svgl logos](https://svgl.app) page to explore the available Svgl logos.

```html
<script setup lang="ts">
import { SvglVueLogo } from '@selemondev/svgl-vue';
</script>
<template>
  <SvglVueLogo :height="200" :width="200" />
</template>
```

## ©️ Eco-system

- [svgl-react](https://github.com/ridemountainpig/svgl-react) for the React eco-system.
npm package: @selemondev/vue3-marquee
Description: <div align="center">
Latest version: 0.0.11

<div align="center">

# Marquee <br> 🌬️

> A beautiful marquee component for Vue.

</div>

## Installation

```bash
npm install @selemondev/vue3-marquee
```
or you can skip npm install, and just copy and paste the source code into your component like Shadcn Vue (don't forget to also copy the tailwind config if you do this).

## Register it as a global component

```js
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);
app.component('Marquee', Marquee)
app.mount('#app')
```

or 

## Register it as a local component

```js
import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
```

## Nuxt

If you are using Nuxt 3, you can simply register it as a Nuxt plugin as shown below:

```ts
// plugins/marquee.ts

import { Marquee } from "@selemondev/vue3-marquee";
import "@selemondev/vue3-marquee/dist/style.css"
export default defineNuxtPlugin((nuxtApp) => {
    nuxtApp.vueApp.component('Marquee', Marquee)
})
```

## Usage

The library has a few props that are self-explanatory; you can get it running in no time. See the web examples for more details.

```js
<Marquee
  :fade="true"
  direction="left"
  :reverse="false"
  :pauseOnHover="false"
  className="" // pass class to change gap or speed
  innerClassName="" // pass class to change gap or speed
>
  <div>Content 1</div>
  <div>Content 2</div>
  <div>Content 3</div>
  <div>Content 4</div>
</Marquee>
```

This library is made specifically for Tailwind users, however you can also use vanilla CSS classes to override the gap.

## Credits

- Inspired by [@devnomic's](https://github.com/devnomic) React Marquee component.

## License

Released under [MIT](/LICENSE) by [@selemondev](https://github.com/selemondev).