Submitted almost 2 years ago

Todo App - React, Sass

wdbyb•150

@wdbyb

Preview site View code

This is a solution for...Todo app

HTML
CSS
JS

3intermediate

Design comparison

SolutionDesign

Solution retrospective

Hi, y'all!

I think, adding SVGs and images as imports in app is not a great idea. How you solve this problem or what method you use to add static images/svgs?

Picture in App can be a component, the same with Text input with Checkbox in TodosList, but I thought about these as overkill, you?

Also have feeling that TodosList is too large?

As always probably miss something to ask more important that those questions but staying open to any advices and propositions.

Best regards!

Community feedback

Renan Tiscoski•1,240
@DonUggioniPosted almost 2 years ago
Hey there,

When dealing when SVG's, I like to tranform them into a sprite. A sprite is like a collection of svg's put into one single file. Look it up, it can be pretty handy. You can create these files online for free. Then in React, you do the following:

Import the file into the component - import icons from '../../assets/images/icons-sprite.svg';

Then, to use a specific icon, you can do this:

<svg className="item__icon-check"> <use className="item__svg" xlinkHref={${icons}#icon-check} /> </svg>

It works for me and I find it easier to deal with SVG's, change their fill colors, etc.

Hope it helps!
Marked as helpful
1
wdbyb•150
@wdbybPosted almost 2 years ago
@DonUggioni Hi, Renan!

I have done it right now and it's worked! And it gives me a possibility to change many svg's properties which is very smart!

Thank you a lot!
0
Renan Tiscoski•1,240
@DonUggioniPosted almost 2 years ago
@wdbyb No problem, glad I could help!
0

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord