cl-icons

📦 Installation

Install the package using npm:

npm install cl-icons

Or using yarn:

yarn add cl-icons

🚀 Usage

Import the icons you need in your React components:

import { ArrowLeft, Calendar, ChartLine } from "cl-icons";

function MyComponent() {
  return (
    <div>
      <ArrowLeft size={24} color="#333" />
      <Calendar size={32} color="blue" />
      <ChartLine size="2em" color="var(--primary-color)" />
    </div>
  );
}

🎨 Customization

Each icon component accepts the following props:

• size: number | string (default: 24)
• color: string (default: "currentColor")

You can also pass any valid SVG props to customize the icons further.

📋 Available Icons

Here's a list of all available icons:

• ArrowLeft
• ArrowRight
• Calendar
• ChartLine
• ChevronDown
• ChevronLeft
• ChevronRight
• ChevronUp
• CircleHelp
• CirclePlus
• CircleX
• Clock
• Copy
• Download
• Ellipsis
• FileText
• Folder
• Image
• Info
• LogIn
• LogOut
• MapPin
• Paperclip
• Pause
• Pencil
• Phone
• Play
• Plus
• Search
• Settings
• Share
• Trash
• Upload
• Volume
• X

... and many more!

🤝 Contributing

We welcome contributions! Please see our CONTRIBUTING.md for details on how to submit pull requests, report issues, or request new features.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

Now, let's create a simple example component to demonstrate how to use the icons:

import React from "react";
import { ArrowLeft, Calendar, ChartLine, CircleHelp, Settings } from "cl-icons";

export default function IconExample() {
  return (
    <div className="flex flex-col items-center justify-center min-h-screen bg-gray-100">
      <h1 className="text-3xl font-bold mb-8">cl-icons Example</h1>
      <div className="flex space-x-4">
        <ArrowLeft size={24} color="#333" />
        <Calendar size={32} color="blue" />
        <ChartLine size="2em" color="green" />
        <CircleHelp size={28} color="#FF6B6B" />
        <Settings size={36} color="#4A4A4A" />
      </div>
      <p className="mt-8 text-gray-600">
        These are just a few examples from the cl-icons library.
      </p>
    </div>
  );
}