vite-plugin-svgr
nivo
vite-plugin-svgr | nivo | |
---|---|---|
4 | 35 | |
479 | 12,697 | |
- | - | |
7.2 | 8.2 | |
3 months ago | 6 days ago | |
TypeScript | TypeScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
vite-plugin-svgr
-
Chrome Extension with React + CRXJS + Vite + Docker
If you want to use svg with React components, install vite-plugin-svgr.
-
Migrating from Create React App (CRA) to Vite
We need vite-plugin-svgr in order to import SVGs as React components. For example:
-
Repeating variable names for imports, types and switch. Got to be a better way!
If you're using Vite, then maybe try one of these: - https://github.com/pd4d10/vite-plugin-svgr - https://github.com/vbenjs/vite-plugin-svg-icons
-
Using Vite with React
Instead of webpack svgr - vite has a community plugin vite-plugin-svgr. Looking at its source code I can tell that it does the work as needed. In the future, I may want to add more SVGR options (currently for custom colors we use css currentColor property), so I may contribute it or create a similar plugin. NOTE: vite bundles the static svg in addition to assets even if you use vite-plugin-svgr. So many useless files will be generated. This is a minor issue that can be unnoticeable. I created a script for deleting those files (it has 0 impacts on the bundle because the client does not download those chunks).
nivo
- Nivo: Dataviz components, built on top of D3 and React
-
Ask HN: What's the best charting library for customer-facing dashboards?
Another alternative - I haven't tried this but bookmarked that one:
https://nivo.rocks (https://github.com/plouc/nivo)
-
Level Up Your Web App with Stunning React Charts: Introducing the Top 10 React Charts Libraries
Nivo is a data visualization library built on top of D3.js and React. It offers a range of well-designed, customizable charts with great animations, making it suitable for creating visually impressive data visualizations.
-
What are some of the best libraries you cannot work without?
When it comes to charting, Nivo makes you immediately superhero.
-
Best Headless Chart Library?
Since no one mentioned it, checkout nivo
-
A Rounded Solution to Image Handling on the OpenSauced Dashboard
Today this works thanks to nivo and Cloudinary, but that journey included a lot of trials and testing for the perfect solution.
-
The Top 6 ReactJS Chart Libraries for Data Visualization
Nivo is built on D3 and provides a variety of templates for data visualization and presentation. It is one of the few libraries that provide server-side rendering ability and fully declarative charts.
-
How Devographics Surveys Are Run, 2022 Edition
Then, we can think about the implementation. We use Nivo for most data visualizations, but we do have a few that either use straight HTML/CSS, or use D3 directly.
-
[AskJS] React libs with charts
I always use https://nivo.rocks/ you can customize it a ton. Works great.
-
Building personal assistant bot with telegram
I use nivo.rocks to visualize the genres and make the list more interactive. Please read my comment on how I implemented it.
What are some alternatives?
webpack-bundle-analyzer - Webpack plugin and CLI utility that represents bundle content as convenient interactive zoomable treemap
visx - 🐯 visx | visualization components
svgr - Transform SVGs into React components 🦁
recharts - Redefined chart library built with React and D3
react-markdown - Markdown component for React
echarts - Apache ECharts is a powerful, interactive charting and data visualization library for browser
awesome-vite - ⚡️ A curated list of awesome things related to Vite.js
rollup-plugin-visualizer - 📈⚖️ Visuallize your bundle
victory - A collection of composable React components for building interactive data visualizations
vite-tsconfig-paths - Support for TypeScript's path mapping in Vite
ngx-charts - :bar_chart: Declarative Charting Framework for Angular