NODEJS | REACT DEBUGGER Story book library

[sudden stone]

I've wrote this issue, if you continue the conversation in the issue so i can document everything!
https://github.com/MindfulLearner/svgestor/issues/14

this is my first time building a library so maybe im alittle bit confuse.

ty to everyone!

[hybrid patrol]

you sure it's that code? it's mentioning url.pathToFileURL

anyways, if that code was intended to be run on browser, it would be problematic. you can't polyfill it either. there is no filesystem on the browser

you could receive the svg as a string instead, perhaps

or as a url that you would fetch, i think that's how react handles assets? not sure if im remembering that correctly

[sudden stone]

I think so, because it came from another code that calls that

[sudden stone]

yeah, the idea is to get the .svg elements, so all the

<svg........ <svg/>

they will go to the function and make the conversion.

it's not something that happens during the browser runtime, but in development.

so, maybe I could use Node.js for this and then just take it as a string for React, as you said.

[sudden stone]

yes but idk for svg! still experimenting,

anyway can i write what you said in my issue?
im doing it for learning purpose, so i document everything

[hybrid patrol]

yes but idk for svg!
react handles assets all the same afaik

[hybrid patrol]

you're saying it's a component though? that's a runtime thing.

im not sure what exactly it's supposed to be doing

svgs shouldn't have to be managed or handled like this, they're just assets

[sudden stone]

So basically to give you more context about my first library:

• i had such a hard time to make a svg with
  heigh
  width
  and especially fill

when i try to import by src or other ways
Ex.
<img src:"public/icon/icon.svg" />

i cant use fill property
so to make it work i have to make a react component

I saw there are library that transform them already in react component, but none of them make a preset of interafaces and animation so i wanted to make one!

anyway if i'm saying something wrong sorry... i'm pretty new in coding

[hybrid patrol]

i had such a hard time to make a svg with
heigh
width
and especially fill
not sure what you mean by this?

svgs are pretty straightforward

you don't need imgs or anything, you can just embed them directly

[sudden stone]

ah really? how do you import them in a .tsx?

[hybrid patrol]

like any other asset...?

assuming they're premade .svgs, i mean

but if you're making them, why not just embed them directly

export const Box = ({ size, color }) => {
  return (
    <svg width={size} height={size}>
      <rect fill={color} width="100%" height="100%" rx="5%" />
    </svg>
  );
}

[sudden stone]

like i have to make all of this
https://www.youtube.com/watch?v=ZEoM_Ap6ks8

insted what i wanted is just

• you put the .svg in the public/asset

• then in the page.tsx you just import the .svg

import { svgBase} from ..../public/asset...

write the

<svg
  interfaceName= baseSvg
  width=100px
  height=100px
  fill=red
  xmlns="http://www.w3.org/2000/svg"
>

[hybrid patrol]

...so, you want them as static assets, but also customizable?

that's kinda, not what "static" means

but i mean, pretty sure you can just do that by nesting svgs

[sudden stone]

nesting svg?

[sudden stone]

yes, in general i want

export const Box = ({ size, color }) => {
  return (
    <svg width={size} height={size}>
      <rect fill={color} width="100%" height="100%" rx="5%" />
    </svg>
  );
}

this part to be automatic, is somthing doing it alone underthe hood whatthe developer have to do is just

import svg
write interface and properties

just that

[hybrid patrol]

<svg fill="red" width="100" height="100">
  <!-- this would be imported -->
  <!-- no fill is specified here -->
  <svg>
    <rect width="100%" height="100%" rx="5%" />
  </svg>
</svg>

[hybrid patrol]

what do you mean by "write interface and properties"

[sudden stone]

in the page.tsx

i have just to write

<svg
    interfaceName= baseSvg
    width=100px
    height=100px
    fill=red
    xmlns="http://www.w3.org/2000/svg"
  >

and im done

[hybrid patrol]

yeah pretty similar thing

[sudden stone]

soorry for bad english

i wrote everything there
https://github.com/MindfulLearner/svgestor/issues/1

[hybrid patrol]

import baseSvg from "../assets/baseSvg.svg";

const App = () => {
  return (
    <svg
      width="100px"
      height="100px"
      fill="red"
    >
      {baseSvg}
    </svg>
  );
}

this should just work

nothing needs to be 'under the hood' here

[sudden stone]

yes but imagine if i want to do this

export interface clickableSvgInterface {
    fill?: string;
    style?: React.CSSProperties;
    width?: string;
    height?: string;
    className?: string;
    onClick?: () => void;
    onMouseEnter?: () => void;
    onMouseLeave?: () => void;
}

[hybrid patrol]

assuming the baseSvg doesn't specify its own fill and width and height, though im sure you could fix sizing with a viewbox

[hybrid patrol]

all of these you can just do with react

you don't need a special component for that

[sudden stone]

but i have to modify this component again

adding new stuff

is time consuming

[hybrid patrol]

you wouldn't

you can just add the stuff you're using directly

react can just work with svg elements directly

[sudden stone]

i'm thinking .. mhm because i remember when i was dealing with svg i try to do that i had a few problem with fill and stuff

problem with the svg too because i had to convert them from a website first

[hybrid patrol]

have you asked around anywhere about that problem with fill?

because im really not sure what problems you're trying to solve here

[sudden stone]

https://stackoverflow.com/questions/64197107/how-to-modify-svg-icon-colors-with-tailwind

Adam Watham the creator of Tailwind CSS made a video about working with inline SVG in Tailwind. In the video he shows a workflow you would use to prep an unoptimized SVG for a Tailwind project. Here's the steps with one extra step he didn't mention:
https://www.youtube.com/watch?v=MbUyHQRq2go&list=PL7CcGwsqRpSM3w9BT_21tUU8JN2SnyckR&index=12

my friend also had problem on setupping them and stuff.

• what i'm trying todo is to make my life easir by type 4 line of code instead of making alot of workaround

///

yes about the fill i've looked around

import React from "react";
import { SvgInterface } from "../../../interfaces/svgInterface";

/**
 * 
 * this component will render the gmail svg
 */
const ItemGmailSvg: React.FC<SvgInterface> = ({ fill, width, height, style }) => {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      width={width}
      height={height}
      viewBox="0 0 32 32"
      style={style}
    >
      <path
        d="M30.996 7.824v17.382a2.044 2.044 0 0 1-2.044 2.044H24.179V15.663L16 21.799l-8.179-6.136v11.588H3.049a2.044 2.044 0 0 1-2.044-2.044V7.824A3.067 3.067 0 0 1 5.92 5.376l-.008-.006L16 12.937 26.088 5.37a3.067 3.067 0 0 1 4.907 2.454z"
        fill={fill}
      />
    </svg>
  );
};

export default ItemGmailSvg;

[hybrid patrol]

what's the actual issue here though

[sudden stone]

i have to write a ton and time consume me and if i use interface i just have to write
page.tsx

import gmailSvg from "public/assets/gmailSvg.svg"

<gmailSvg
    interfaceName= baseSvgInterface
    width=100px
    height=100px
    fill=red
  >

//

interfaces.tsx are already wrote we just have to call them

/**
 * interface that will define the props of the svg components
 */
export interface baseSvgInterface{
    width: string;
    height: string;
    fill: string;
}

-- now is a simple case but if i need animation and stuff i could use other interface that helps me with that

So is hard to make errors, and less thing to do less time to lose

without making a component.tsx is just all automatic

[hybrid patrol]

you're only talking about your proposed solutions

what is the actual problem

i can't help you if i don't know what you need help with

[sudden stone]

aah sorry! sorry!

but i think i already have a response for it

[sudden stone]

you yold me
if that code was intended to be run on browser, it would be problematic. you can't polyfill it either. there is no filesystem on the browser

so i might have to change way of managing them !

[hybrid patrol]

https://xyproblem.info