pheralb / react-symbols

✨ Symbols VSCode Icon Theme by Miguel Solorio, for React.

Explore   ❖   Getting Started   ❖   License   ❖   VSCode Theme

👋 Introduction

React-Symbols is a library for React with the icons of the VSCode theme "Symbols" by Miguel Solorio (@miguelsolorio):

• +100 files & folders icons.
• Support React Server Components (RSC) & Next.js 13/14 /app directory.
• Lightweight.
• Ready to use with Typescript.
• SVG optimized and minified.

🚀 Getting Started

React-Symbols require React >=16.8.0.

- Install

# with npm:
npm install @react-symbols/icons

# with pnpm:
pnpm add @react-symbols/icons

# with ultra:
ultra install @react-symbols/icons

# with yarn:
yarn add @react-symbols/icons

- Usage

import { Angular, Astro, Document } from "@react-symbols/icons"

const MyComponent = () => {
  return (
    <>
      <Angular width={128} height={128} />
      <Astro width={128} height={128} />
      <Document width={128} height={128} />
    </>
  )
}

export default MyComponent

Config for use the library with Remix Old Compiler if you are using CJS (v1 uses CJS by default, v2 uses ESM):

// Add in the remix.config.js:
module.exports = {
  ...
  serverDependenciesToBundle: ["@react-symbols/icons"],
  ...
};

Change the name of the icon:

import { Bun as BunIcon } from "@react-symbols/icons"

const MyComponent = () => {
  return (
    <>
      <BunIcon width={128} height={128} />
    </>
  )
}

export default MyComponent

⚙️ Stack

This is a Turborepo project bootstrapped with create-turbo:

For library:

• SWC - Rust-based platform for the Web.
• tsup (alternative) - The simplest and fastest way to bundle your TypeScript libraries.
• React - A JavaScript library for building user interfaces.
• Typescript - TypeScript is JavaScript with syntax for types.

For website:

• Remix - Create modern, resilient user experiences with web fundamentals.
• Typescript - TypeScript is JavaScript with syntax for types.
• Tailwind CSS - A utility-first CSS framework for rapidly building custom designs.
• tailwindcss-animate - A Tailwind CSS plugin for creating beautiful animations.
• shadcn/ui + Radix UI - An opinionated toast component for React.
• Sonner - An opinionated toast component for React.

🙌 Contributing

🔑 License

• MIT.

react-symbols's Issues

✨Añadir el logo de Nuxt

Sugiero añadir un nuevo icono, cuyo va a ser el del framework de vue: Nuxt

El codigo que se puede utilizar para, library/src/library/nuxt.ts

import type { ComponentProps, FC } from "react"

const Nuxt: FC<ComponentProps<"svg">> = (props) => (
    <svg
      xmlns="http://www.w3.org/2000/svg" 
     viewBox="0 0 61 40"
     fill="none"
     {...props}>
   <path d="M33.9971 39.539H56.5247C57.2402 39.539 57.9432 39.3564 58.5628 39.0093C59.1825 38.6623 59.697 38.1631 60.0546 
  37.5619C60.4122 36.9608 60.6003 36.2789 60.6 35.5849C60.5997 34.8908 60.411 34.2091 60.0528 33.6083L44.9239 8.1904C44.5663 
  7.5894 44.0519 7.09032 43.4324 6.74332C42.8129 6.39632 42.1101 6.21363 41.3947 6.21363C40.6793 6.21363 39.9766 6.39632 
  39.357 6.74332C38.7375 7.09032 38.2231 7.5894 37.8655 8.1904L33.9971 14.6939L26.4338 1.97648C26.0759 1.37553 25.5613 
  0.876518 24.9416 0.52958C24.3219 0.182643 23.619 0 22.9035 0C22.188 0 21.4851 0.182643 20.8654 0.52958C20.2457 0.876518 
  19.7311 1.37553 19.3732 1.97648L0.547184 33.6083C0.189033 34.2091 0.00031171 34.8908 3.85805e-07 35.5849C-0.000310938 
  36.2789 0.187799 36.9608 0.54541 37.5619C0.903021 38.1631 1.41752 38.6623 2.03717 39.0093C2.65681 39.3564 3.35975 39.539 
  4.07528 39.539H18.2162C23.819 39.539 27.9509 37.1518 30.794 32.4945L37.6965 20.8993L41.3936 14.6939L52.4895 
  33.3335H37.6965L33.9971 39.539ZM17.9857 33.3272L8.11711 33.325L22.9101 8.47362L30.2912 20.8993L25.3492 29.2044C23.4611 
  32.2262 21.3162 33.3272 17.9857 33.3272Z"
  fill="#00DC82"/>

)

export default Nuxt```