Pine Icons for Vue

Beautifully hand-crafted Vue SVG icons designed to enhance your web applications with elegance and simplicity.

Browse all icons at pineicons.com →

Table of Contents

• Installation
• Usage
• Icon Sizes and Styles
• Icon Naming Convention
• Accessibility
• Customization
• Examples

Installation

Before installing Pine Icons, ensure you have Node.js and npm installed on your system.

npm install @pine-icons/vue

Usage

Import icons as Vue components:

<template>
  <div>
    <Beaker class="h-6 w-6 text-blue-500" />
    <p>Explore science</p>
  </div>
</template>

<script setup>
import { Beaker } from "@pine-icons/vue/icons/solid";
</script>

Each icon can be imported from its respective style directory. Pine Icons work seamlessly with Tailwind CSS classes for styling.

Icon Sizes and Styles

Pine Icons are available in multiple styles:

• Outline icons: @pine-icons/vue/icons/outline
• Solid icons: @pine-icons/vue/icons/solid

Choose the appropriate import path based on your desired style.

Icon Naming Convention

Icons follow upper camel case naming:

<script setup>
import { Beaker } from "@pine-icons/vue/icons/solid";
import { ArrowRight } from "@pine-icons/vue/icons/solid";
import { UserCircle } from "@pine-icons/vue/icons/outline";
</script>

Accessibility

Pine Icons components accept standard HTML attributes including ARIA attributes:

<template>
  <Beaker class="h-6 w-6 text-blue-500" role="img" aria-label="Science experiment" />
</template>

<script setup>
import { Beaker } from "@pine-icons/vue/icons/solid";
</script>

For decorative icons, set aria-hidden="true":

<template>
  <Beaker class="h-6 w-6 text-blue-500" aria-hidden="true" />
</template>

<script setup>
import { Beaker } from "@pine-icons/vue/icons/solid";
</script>

Customization

Basic Styling

Use Tailwind CSS classes or standard CSS to customize icons:

<!-- With Tailwind CSS -->
<Beaker class="h-6 w-6 text-blue-500 hover:text-blue-600" />

<!-- With standard CSS -->
<Beaker class="icon-custom" />

.icon-custom {
  height: 1.5rem;
  width: 1.5rem;
  color: #3b82f6;
}

.icon-custom:hover {
  color: #2563eb;
}

Advanced Styling

Apply transformations and effects:

<Beaker class="h-8 w-8 text-purple-600 transform rotate-45 transition-all duration-300 hover:scale-110" />

Examples

Button with Icon

<template>
  <button class="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600">
    <span>Next</span>
    <ArrowRight class="h-5 w-5" />
  </button>
</template>

<script setup>
import { ArrowRight } from "@pine-icons/vue/icons/solid";
</script>

Navigation Item

<template>
  <a href="/" class="flex items-center space-x-2 text-gray-600 hover:text-gray-900">
    <Home class="h-6 w-6" />
    <span>Home</span>
  </a>
</template>

<script setup>
import { Home } from "@pine-icons/vue/icons/outline";
</script>

Loading State

<template>
  <button :disabled="isLoading" class="flex items-center space-x-2 px-4 py-2 bg-blue-500 text-white rounded-lg">
    <template v-if="isLoading">
      <Spinner class="h-5 w-5 animate-spin" />
      <span>Loading...</span>
    </template>
    <span v-else>Submit</span>
  </button>
</template>

<script setup>
import { ref } from "vue";
import { Spinner } from "@pine-icons/vue/icons/outline";

const isLoading = ref(false);
</script>

List with Icons

<template>
  <ul class="space-y-2">
    <li v-for="feature in features" :key="feature" class="flex items-center space-x-2">
      <CheckCircle class="h-5 w-5 text-green-500" />
      <span>{{ feature }}</span>
    </li>
  </ul>
</template>

<script setup>
import { CheckCircle } from "@pine-icons/vue/icons/solid";

const features = ["Easy integration", "Customizable styles", "Accessibility support"];
</script>

Dynamic Icon Component

<template>
  <component :is="icon" class="h-6 w-6" :class="iconColor" />
</template>

<script setup>
import { computed } from "vue";
import { CheckCircle, XCircle } from "@pine-icons/vue/icons/solid";

const props = defineProps({
  status: {
    type: String,
    required: true,
  },
});

const icon = computed(() => {
  return props.status === "success" ? CheckCircle : XCircle;
});

const iconColor = computed(() => {
  return props.status === "success" ? "text-green-500" : "text-red-500";
});
</script>

Icon with Badge

<template>
  <div class="relative">
    <Bell class="h-6 w-6 text-gray-600" />
    <span
      v-if="unreadCount"
      class="absolute -top-1 -right-1 h-4 w-4 rounded-full bg-red-500 text-white text-xs flex items-center justify-center"
    >
      {{ unreadCount }}
    </span>
  </div>
</template>

<script setup>
import { Bell } from "@pine-icons/vue/icons/outline";

defineProps({
  unreadCount: {
    type: Number,
    default: 0,
  },
});
</script>