DEV Community: Aska

Customizing SVG Icon Color with React Component Using CSS Filter

Aska — Mon, 07 Sep 2020 02:07:25 +0000

When you want to dynamically change the color of svg icons, like if you're building a theme, sometimes it is difficult to dynamically pass the value especially in case you are using svg files directly exported from figma. SVG files have their preset value with fill, stroke, maybe shadow value with filter, with <g>, <circle>, <rect> ... AND different structures for each icon.

I found a stable way to implement this to svgs library using CSS filter so I'd like to share.

What is filter?

Filter is a css attribute that achieves varying visual effects (sort of like Photoshop filters for the browser). (You can see more explanation here)
Since it modifies the visible colors in svg, we do not need to modify each element (e.g. <g>, ) under <svg> element.

How do I set the hex color with filter?

This article/codepen gives a great example. By adjusting each filter value, you can achieve the appearance that looks like the desired hex color.

How can I use it with React component?

All you need is to add a way to convert the hex value to CSS filter value in your project. You could create on your own or copy a snippet from the codepen above, but this time I used this library (hex-to-css-filter) to make it easier to implement.

There are two things that you have to be careful.

This library assumes the base color as #000 so if you're using white-based icons, you'll have to replace them with fill #000.
If you are using React inline styling, you have to remove the semi-colon at the end of the value.

Creating React component with SVG

First, create a react component with SVG that accepts props and passes it to SVG element.

import * as React from "react";

const SvgMicOff = (props) => (
  <svg
    width="24"
    height="25"
    viewBox="0 0 24 25"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    {...props}
  >
    <path
      d="M1 2L23 24"
      stroke="black"
      stroke-width="2"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
...
  </svg>
);

export default SvgMicOff;

In App.js, require the component and hex-to-css-filter library.

import MicOff from "../icons/mic-off";
import { hexToCSSFilter } from "hex-to-css-filter";

Setting hex color

In the App component, create a styling passing hexColor dynamically from the state. (and make sure to remove the semi-colon!)

export default function App() {
  const [hexColor, setHexColor] = useState("#000");

  let cssFilterValue = "";
  const cssFilter = hexToCSSFilter(hexColor, {
    acceptanceLossPercentage: 1,
    maxChecks: 10
  });
  cssFilterValue = cssFilter.filter.replace(";", "");
  //semi-colon should be removed from the string

Setting shadow

If you also want to add shadow, you could also create like so

const [shadow, setShadow] = useState("");
...
 const shadowColor =
    shadow === "dark"
      ? "drop-shadow(1px 1px 1px rgba(0,0,0,0.5))"
      : shadow === "light"
      ? "drop-shadow(1px 1px 1px rgba(255,255,255,0.5))"
      : "";

and at last, all you have to do is to connect them as a string :)

<MicOff style={{ filter: `${cssFilterValue} ${shadowColor}` }} />

And this is the result!

Feel free to play around, and hope this helps your development :)
Also, please let me know if you find something I can improve!

Should you pick Juno(HackerYou) or Lighthouse Labs?

Aska — Sun, 28 Jun 2020 22:36:11 +0000

Hi, my name is Asuka, I'm one of those bootcamp graduates who lives in Toronto, graduated from Lighthouse Labs in August 2019. I'm currently building a 3D/AR/VR presentation software at a company here in Toronto.

When aspiring developers reach me out for career advice, the questions asked the most, was why I chose Lighthouse labs over others. Well, In the company I worked for the first time after graduation, most of my colleagues were graduates from Juno (HackerYou). So you can see that which bootcamp you pick does not make much difference.

Yet, I got so much information from my previous colleagues about the experience in Juno and had a chance to compare the differences and since this might interest those who are choosing the bootcamp, I would like to share.

Disclaimer: This is solely based on my opinion and what I heard at the point in 2020 January from those who graduated in 2019. There's a high chance that these things have already changed, most likely improved. Please do make sure to reach out to each Bootcamp for the correct up-to-date information.

1. Fullstack Development vs Frontend Development
2. Course Intensity
3. Career support
4. Entrance requirement
Conclusion

1. Fullstack Development vs Frontend Development

The biggest difference between LHL and Juno is that LHL focuses on full-stack development whereas Juno focuses on Frontend development. Even though LHL teaches full-stack development, the language used for the backend development is NodeJS (and a bit of Ruby), so LHL's biggest focus is mostly JS throughout the curriculum. (I still remember the lecturer of CSS class said "I hate CSS".) So I ended up teaching myself most of CSS skills at my first job as Front End Engineer. However, they teach JS so well I did not have much problem with JS at my first work.

On the other hand, Juno teaches CSS as much as JS to improve the design/look of websites. I learned so much of CSS skills from my colleagues and they were so useful.

2. Course Intensity

As I mentioned above, LHL teaches full-stack and Juno teaches frontend. The thing is, they both spend the same duration of time (12 weeks) to finish, and one has much more frameworks/tools to learn than the other. Naturally, LHL has a much more intensive learning schedule (it was 9am to 9pm), whereas Juno does not have such a crazy schedule.

Due to the nature of the course intensity, LHL has some people who have difficulty catching up during the course. However, unless you give up on your own will, they give students a chance to rollback and do take the same course again in the middle of the course.

3. Career support

They both offer resume/interview critique and speed interview sessions to students as part of the curriculum, but on top of these essentials, they both offer unique job support.

As for LHL, they actually send out the students' resume to corporates that are looking for junior devs. If the corporate find the resume/portfolio compelling, they can ask the students to come over for the interview. Therefore, if you're LHL graduates, chances are you receive an interview with a company that you never applied on your own.

On the other hand, Juno includes building your portfolio as part of the curriculum. Building a portfolio to showcase your work only increases the chances for job interviews. Also, Juno has a buddy system with the previous graduates, the student has their own senpai so if you're lucky, you can ask for some advice from them about job hunting or get a referral.

4. Entrance requirement

This was actually the real reason why I chose LHL. The entrance requirement bar is much higher in Juno compared to LHL. Juno has 4 or 5 interviews whereas Lighthouse has 1 or 2. The assignment I took for Juno was copying a website based on design. I made it so that it looks the same, but they failed me since the code did not look how they wanted it to be, and suggested to take a part-time course. The part-time course in Juno has a high reputation so it is not a bad idea if you decided to take, but as an immigrant who was just laid off, I did not have time to do a part-time course all over again. I took LHL exam and passed, so I picked LHL, ended up having the same result. (working with many Juno graduates as Front End Engineer)

Conclusion

Since I graduated Lighthouse Labs I might be a bit biased, but I can say that these two bootcamps are legit if you would like to transition your career. Also, Bootcamps for sure helps you to find a job, but YOU have to do most of the work in the same way as any other career institution/college. Hope this helps you make a good career decision, and let me know if there is anything to be corrected :)