Roadtrip Icons Neo

Welcome to Roadtrip Icons Neo – an icon library designed specifically for Nuxt 3 and Vue applications. These icons are sourced from a dedicated Figma library to maintain consistency across design and development. Each icon is available in five sizes to meet various layout needs and includes helpful keywords to make searching quick and easy. The icons are based on Lucide Icons, a open-source icon library.

Features

• 4 Icon Sizes: Dynamic Icon Sizes: Icons are available in two main categories to meet various layout needs:

• Standard Icons: 5 sizes available (sm, md, lg, xl, xxl).

  • sm - Small
  • md - Medium
  • lg - Larg
  • xl - Extra Large
  • xxl - Extra extra Large

• Small Icons (names ending with -small): 6 ultra-compact sizes available (sm, xs, 2xs, 3xs, 4xs, 5xs).

  • sm - Small
  • xs - Extra Small
  • 2xs - Extra Extra Small
  • 3xs - Extra Extra Extra Small
  • 4xs - Extra Extra Extra Extra Extra Small
  • 5xs - Extra Extra Extra Extra Extra Small

• Keyword Search: Icons are tagged with keywords, enabling efficient and targeted searches to quickly locate the right icons for your project.

Icons without stroke

Some icons are not designed with a stroke and should not be affected by the dynamic strokeWidth adjustment. To handle this, add the name of these icons to the strokeWidthExceptions list in the RtIcon component.

Example:

const strokeWidthExceptions = ["drag-and-drop", /* other icons */];

This way, these icons will keep their original appearance regardless of the selected size.

Installation

Install the Roadtrip Icons Neo library via npm:

npm install @roadtrip-icons-neo

Usage

To use an icon in your Nuxt 3 project, simply import the icon component and specify its size as needed:

<template>
  <RtIcon name="icon-name" size="md" />

  <RtIcon name="icon-name-small" size="3xs" />
</template>

<script setup>
import RtIcon from 'roadtrip-icons-neo'
</script>

Available Sizes

Standard Icons Used for default icons.

| Size | Description | |------|--------------------| | sm | Small (16px) | | md | Medium (20px) | | lg | Large (24px) | | xl | Extra Large (28px) | | xxl | Extra extra Large (32px) |

Small Icons (*-small) Exclusively available for icons containing -small in their name.

| Size | Description | |------|--------------------| | sm | Small (16px) | | xs | Extra Small (12px) | | 2xs | 2X Small (10px) | | 3xs | 3X Small (6px) | | 4xs | 4X Small (8px) | | 5xs | 5X Small (4px) |

License

This library is licensed under the MIT License. See the LICENSE file for details.

Thank you for choosing Roadtrip Icons Neo! Happy designing and developing!