https://github.com/mukhindev/react-svg-use-symbol

Easy use of SVG symbols in React
https://github.com/mukhindev/react-svg-use-symbol

icons react svg ui

Last synced: 3 days ago
JSON representation

Easy use of SVG symbols in React

• Host: GitHub
• URL: https://github.com/mukhindev/react-svg-use-symbol
• Owner: mukhindev
• Created: 2024-05-12T21:32:07.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-05-12T22:18:08.000Z (6 months ago)
• Last Synced: 2024-09-19T12:38:24.348Z (about 2 months ago)
• Topics: icons, react, svg, ui
• Language: TypeScript
• Homepage:
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# @mukhindev/react-svg-use-symbol

Easy use of SVG symbols in React

## Install

```

npm install @mukhindev/react-svg-use-symbol

```

## One-component example

```JavaScript

import { createSVGSymbols } from "@mukhindev/react-svg-use-symbol";

const { Symbols, SVG } = createSVGSymbols({

  "two-circles": (

    

      

      

    

  ),

  box: (

    

      

    

  ),

});

export default function MyComponent() {

  return (

    


      

      

      

      

    

  );

}

```


## Icons example

The previous example is intended as a quick demonstration, but is of little use.

`` and `` are useful when there are a lot of reused graphics. For example icons.

```

src

 ┣━ app

 ┃   ┗━ App.tsx

 ┣━ entities

 ┃   ┗━ MyComponent.tsx

 ┗━ ui

     ┗━ Icon

         ┣━ icons

         ┃   ┣━ boxIcon.tsx

         ┃   ┗━ twoCirclesIcon.tsx

         ┗━ index.ts

```

```JavaScript

// Icon/icons/boxIcon.tsx

export default (

  

    

  

);

```

```JavaScript

// Icon/icons/twoCirclesIcon.tsx

export default (

  

    

    

  

);

```

```JavaScript

// Icon/index.ts

import { createSVGSymbols } from "@mukhindev/react-svg-use-symbol";

import boxIcon from "./icons/boxIcon";

import twoCirclesIcon from "./icons/twoCirclesIcon";

export const { Symbols: IconSymbols, SVG: Icon } = createSVGSymbols({

  "two-circles": twoCirclesIcon,

  box: boxIcon,

});

```

```JavaScript

// App.ts

import { IconSymbols } from "src/ui/Icon";

export default function App(props) {

  const { children } = props;

  return (

    

      {children}

      

    

  );

}

```

```JavaScript

// MyComponent.ts

import { Icon } from "src/ui/Icon";

export default function MyComponent() {

  return (

    


      

      

      

    

  );

}

```