inkscape-open-symbols VS react-icons

* Arc from 3 points: There is a Live Path Effect for that.

* tangent/normal to a curve: there is an experimental Live Path Effect for tangent (You can get the normal by just rotating the tangent 90 degrees)

* Measure length: Many ways to get that: e.g. the measure tool. or you can use the Measure segments Live Path Effect.

* Measuring the area: There is an extension: Extensions > Visualize Path > Measure Path.

* Measuring angles: again, you can use the measure tool.

* Library of elements: Inkscape has symbols Objects > Symbols. You can also add you own symbols. See also https://github.com/PanderMusubi/inkscape-open-symbols

* Inkscape snapping is way better (See the new smart alignement snapping in version 1.2).

* Inkscape also prints instruction on how to use tools on the status bar

react-icons: Quickly integrate a variety of icons into your React app. Learn more

3. React Icons

We make use of react-icons to display the play and pause indications.

If you're using React, I can recommend this: https://react-icons.github.io/react-icons/

Links to external resources like Tailwind CSS, Google Fonts, and React Icons are provided, offering additional references for users.

react-icons - lib de icones para react.

As you can observe, here we again make use of style-components to create a container for the underlying icon. Also, we make use of the react-icons that provide a react wrapper for icons from various providers. Here we make use of the icons from the HeroIcons2 provider hence we import it from hi2 from the react-icons

As you can observe, the homepage consists of a few text elements and a navigation bar adorned with icons. To achieve this, I employed Material-UI (MUI) and React Icons. However, there's a noticeable hiccup - the page, ideally, should load swiftly, but instead, it's a bit sluggish. Even more concerning, it's transferring more data than anticipated.

Similar concept to react-icons (https://react-icons.github.io/react-icons/)in that regard.