egoist / Svg To Component
Licence: mit
Convert SVG to React/Vue components
Stars: ✭ 40
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to Svg To Component
Vue Calendar Heatmap
A lightweight calendar heatmap Vuejs component built on SVG, inspired by github's contribution calendar graph
Stars: ✭ 120 (+200%)
Mutual labels: svg, component
Vue Svg Map
A set of Vue.js components to display an interactive SVG map
Stars: ✭ 48 (+20%)
Mutual labels: svg, component
React Planner
✏️ A React Component for plans design. Draw a 2D floorplan and navigate it in 3D mode.
Stars: ✭ 846 (+2015%)
Mutual labels: svg, component
React Svg Map
A set of React.js components to display an interactive SVG map
Stars: ✭ 150 (+275%)
Mutual labels: svg, component
Vue Content Loader
SVG component to create placeholder loading, like Facebook cards loading.
Stars: ✭ 2,790 (+6875%)
Mutual labels: svg, component
Respin
React SVG loading spinner based on jxnblk.com/loading
Stars: ✭ 21 (-47.5%)
Mutual labels: svg, component
React Native Really Awesome Button
React Native button component. Awesome Button is a 3D at 60fps, progress enabled, social ready, extendable, production ready component that renders an awesome animated set of UI buttons. 📱
Stars: ✭ 988 (+2370%)
Mutual labels: component
Jquery Mapael
jQuery plugin based on raphael.js that allows you to display dynamic vector maps
Stars: ✭ 981 (+2352.5%)
Mutual labels: svg
Vue Direction
👋 Declarative, direction-aware hover in Vuejs
Stars: ✭ 35 (-12.5%)
Mutual labels: component
React Currency Formatter
💵 react component for currency formatting
Stars: ✭ 38 (-5%)
Mutual labels: component
Finder
The Finder component finds files and directories via an intuitive fluent interface.
Stars: ✭ 7,840 (+19500%)
Mutual labels: component
Svg World Map
🗺 A JavaScript library to easily integrate one or more SVG world maps with all nations (countries) and second-level political subdivisions (countries, provinces, states).
Stars: ✭ 38 (-5%)
Mutual labels: svg
Hellobooks
A Single-Page Library Management App built with nodejs, express and react and redux
Stars: ✭ 37 (-7.5%)
Mutual labels: component
svg-to-component
Install
yarn add svg-to-component
Usage
const Svg2Component = require('svg-to-component')
// Generate React component from SVG string
new Svg2Component()
//...........svg string, component name
.fromString('<svg ...', 'MyIcon')
.toReactComponent()
// export default function MyIcon(props) {
// return <svg ...>
// }
// You can also directly generate component from an SVG file
new Svg2Component()
.fromFileSync('./my-icon.svg', 'optional-component-name')
.toVueComponent()
API
const svg2component = new Svg2Component()
svg2component.fromString(str, name)
str
SVG string.
name
Could be either of:
- Component name, either in
kebab-case
orPascalCase
. - File path, we extract component name from it.
svg2component.fromFile(filename, [name])
Return a Promise.
filename
Path to SVG file.
name
Component name.
svg2component.fromFileSync(filename, [name])
Like .fromFile
but sync and return this
svg2component.toReactComponent([opts])
Return a string which represents a React component.
opts
transformJSX
Type: boolean
Default: true
svg2component.toVueComponent([opts])
Return a string which represents a Vue component.
opts
transformJSX
Type: boolean
Default: true
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
svg-to-component © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
github.com/egoist · GitHub @EGOIST · Twitter @_egoistlily
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].