Change:
Nav logo should be served a react svg component in the codebase for reference. The alt text should read: ''
Removing the first timers, because it may not be very trivial.
I would love to get this done. Please assign it to me.
Issue assignment is not necessary, we accept the first valid PR, which follows our contribution guidelines.
Thanks for the heads up, I thought we still followed the assignment rule like in the past. I will submit a PR soon.
There you go, making an exception because of your interest :) Happy contributing!
Hi how is this coming along. Are you still working on this?
Hi I will be making a PR today hopefully. Was stuck in some other work.
Hi I ran into an Eslint issue, when I converted SVG to JSX the svg path code is so lengthy that I get Any hint on how I can manage this? tried running the but it doesn't work.
You should be able to wrap using the lines at 80 in your code editor if you happen to use VS Code? Let's make a PR or share a link to your repo/branch for more context. Thanks.
Created a PR with ESLint max-len disabled. I tried wrapping the code to multiple lines but some string blocks are very long and would break the svg if put on a new line.

Discussion:
<ins> /* eslint-disable max-len */ import React from 'react'; function freeCodeCampLogo() { return ( <svg height='38' viewBox='0 0 263 31' width='263' xmlns='http://www.w3.org/2000/svg' > <g fill='#FFF' fillRule='evenodd' stroke='none' strokeWidth='1'> <path d='M3.622 9.586H1.337c-.802 0-1.215-.344-1.215-1.057 0-.688.413-1.057 1.215-1.057h2.285v-2.04c0-3.54 1.774-5.285 5.347-5.285 1.434 0 2.65.295 3.622.812 1.215.762 1.847 1.868 1.847 3.244 0 .934-.34 1.327-1.045 1.327-.462 0-.85-.295-1.094-.81-.291-.935-.583-1.451-.753-1.672-.413-.516-1.264-.811-2.528-.811-2.188 0-3.209 1.106-3.209 3.244v1.966H9.99c.924 0 1.386.344 1.386 1.057 0 .688-.462 1.057-1.386 1.057H5.81v13.297c0 .811-.341 1.229-1.046 1.229-.68 0-1.045-.418-1.045-1.229V9.586h-.097zM22.265 21.727V9.586h-3.111c-.851 0-1.264-.344-1.264-1.057 0-.688.413-1.057 1.264-1.057h4.132c.68 0 1.094.639 1.094 1.794 1.264-1.4 2.65-2.138 4.083-2.138 1.216 0 2.115.344 2.82 1.106.68.762 1.045 1.745 1.045 2.9 0 .811-.34 1.229-1.045 1.229-.413 0-.68-.295-.85-.811-.293-.983-.463-1.5-.511-1.573-.292-.516-.851-.811-1.605-.811-.802 0-1.555.295-2.236.86-.413.295-.972.934-1.726 1.868v9.684h3.914c.85 0 1.264.344 1.264.983 0 .688-.413 1.106-1.264 1.106h-9.14c-.85 0-1.263-.344-1.263-1.057 0-.688.413-1.057 1.263-1.057h3.16l-.024.172zM37.943 16.025v2.31c0 2.508 1.726 3.712 5.226 3.712 1.264 0 2.285-.123 3.111-.418.413-.123 1.143-.516 2.115-1.229.632-.59 1.094-.86 1.264-.86.583 0 .85.295.85.934s-.413 1.278-1.263 1.966c-1.386 1.106-3.452 1.672-6.199 1.672-4.812 0-7.243-1.918-7.243-5.752v-5.8c0-1.328.51-2.507 1.483-3.417 1.312-1.278 3.281-1.868 5.906-1.868 4.716 0 7.05 2.384 7.05 7.079 0 1.155-.463 1.745-1.313 1.745H37.919l.024-.074zm0-2.089h10.282c0-3.146-1.726-4.694-5.226-4.694a7.124 7.124 0 00-3.452.86c-1.045.762-1.604 1.622-1.604 2.605v1.23zM55.954 16.025v2.31c0 2.508 1.726 3.712 5.226 3.712 1.264 0 2.285-.123 3.112-.418.413-.123 1.142-.516 2.114-1.229.632-.59 1.094-.86 1.264-.86.584 0 .851.295.851.934s-.413 1.278-1.264 1.966c-1.385 1.106-3.452 1.672-6.198 1.672-4.813 0-7.244-1.918-7.244-5.752v-5.8c0-1.328.51-2.507 1.483-3.417 1.313-1.278 3.281-1.868 5.907-1.868 4.715 0 7.049 2.384 7.049 7.079 0 1.155-.462 1.745-1.313 1.745H55.93l.024-.074zm0-2.089h10.282c0-3.146-1.726-4.694-5.226-4.694a7.124 7.124 0 00-3.451.86c-1.094.762-1.605 1.622-1.605 2.605v1.23zM72.094 17.377V8.332c0-4.768 2.48-7.078 7.462-7.078 2.018 0 3.622.467 4.886 1.327 1.434 1.106 2.115 2.605 2.115 4.473 0 .86-.34 1.327-1.094 1.327-.51 0-.85-.418-1.094-1.278-.121-.688-.413-1.4-.802-2.04-.632-1.155-2.018-1.671-4.18-1.671-1.848 0-3.16.467-3.963 1.4-.753.861-1.142 2.213-1.142 4.13v7.546c0 1.966.413 3.367 1.215 4.227.85.934 2.188 1.45 4.01 1.45 2.82 0 4.425-.983 4.813-2.95.17-.761.22-1.105.22-1.154.17-.418.461-.64.85-.64.68 0 1.094.468 1.094 1.328 0 1.794-.754 3.195-2.236 4.301-1.216.811-2.747 1.23-4.716 1.23-2.285 0-4.084-.517-5.396-1.623-1.361-1.254-2.042-2.999-2.042-5.26zM89.887 18.655v-5.972c0-3.663 2.406-5.457 7.243-5.457s7.244 1.794 7.244 5.457v5.972c0 3.662-2.358 5.457-7.122 5.457-4.959 0-7.365-1.82-7.365-5.457zm12.348 0v-5.972c0-2.262-1.726-3.417-5.226-3.417-3.33 0-5.056 1.155-5.056 3.417v5.972c0 2.261 1.726 3.417 5.177 3.367 3.427 0 5.105-1.106 5.105-3.367zM120.149 22.12c-.973.763-1.848 1.23-2.577 1.5-.802.295-1.774.467-2.917.467-1.944 0-3.5-.418-4.715-1.229-1.386-.934-2.066-2.31-2.066-4.227v-6.096c0-1.794.68-3.195 2.017-4.13 1.143-.81 2.698-1.228 4.546-1.228 1.215 0 2.236.123 3.038.418.802.295 1.653.81 2.576 1.573V1.67c0-.983.34-1.499.973-1.499.68 0 1.094.516 1.094 1.5V22.98c0 .762-.34 1.106-.973 1.106-.413 0-.68-.221-.802-.688-.146-.344-.194-.738-.194-1.278zm-.122-2.433v-8.356c-1.045-.762-1.847-1.278-2.48-1.5-.85-.344-1.774-.516-2.819-.516-1.312 0-2.406.221-3.208.762-1.045.64-1.556 1.573-1.556 2.728v5.752c0 1.229.51 2.138 1.604 2.777.851.467 1.945.762 3.282.762 1.094 0 2.066-.172 2.868-.516a19.118 19.118 0 002.31-1.893zM127.951 16.025v2.31c0 2.508 1.726 3.712 5.226 3.712 1.264 0 2.285-.123 3.111-.418.414-.123 1.143-.516 2.115-1.229.632-.59 1.094-.86 1.264-.86.583 0 .85.295.85.934s-.412 1.278-1.263 1.966c-1.386 1.106-3.452 1.672-6.198 1.672-4.813 0-7.244-1.918-7.244-5.752v-5.8c0-1.328.51-2.507 1.483-3.417 1.312-1.278 3.281-1.868 5.906-1.868 4.716 0 7.05 2.384 7.05 7.079 0 1.155-.462 1.745-1.313 1.745h-11.011v-.074h.024zm0-2.089h10.282c0-3.146-1.726-4.694-5.226-4.694a7.124 7.124 0 00-3.452.86c-1.093.762-1.604 1.622-1.604 2.605v1.23zM144.09 17.377V8.332c0-4.768 2.48-7.078 7.463-7.078 2.018 0 3.622.467 4.886 1.327 1.434 1.106 2.115 2.605 2.115 4.473 0 .86-.34 1.327-1.094 1.327-.51 0-.851-.418-1.094-1.278-.122-.688-.413-1.4-.802-2.04-.632-1.155-2.018-1.671-4.181-1.671-1.847 0-3.16.467-3.962 1.4-.754.861-1.142 2.213-1.142 4.13v7.546c0 1.966.413 3.367 1.215 4.227.85.934 2.188 1.45 4.01 1.45 2.82 0 4.424-.983 4.813-2.95.17-.761.219-1.105.219-1.154.17-.418.462-.64.85-.64.681 0 1.095.468 1.095 1.328 0 1.794-.754 3.195-2.237 4.301-1.215.811-2.746 1.23-4.715 1.23-2.285 0-4.084-.517-5.396-1.623-1.313-1.254-2.042-2.999-2.042-5.26zM173.478 22.12c-1.045.763-1.847 1.279-2.406 1.5-.754.295-1.653.467-2.82.467-1.726 0-3.16-.344-4.254-1.106-1.264-.86-1.944-2.138-1.944-3.834 0-1.672.68-3.023 2.017-3.957 1.143-.86 2.65-1.279 4.351-1.279 1.434 0 3.038.345 4.886.984v-2.557c0-1.228-.584-2.089-1.726-2.605-.802-.344-1.774-.516-2.917-.516-2.698 0-4.132.762-4.424 2.261-.121.688-.218 1.057-.218 1.106-.17.344-.462.516-.851.516-.754 0-1.143-.417-1.143-1.229 0-1.106.414-2.089 1.264-3.023 1.046-1.155 2.917-1.745 5.567-1.745 2.114 0 3.67.344 4.715 1.057 1.215.86 1.847 2.31 1.847 4.35v7.423c0 .86.17 1.45.51 1.745.05.05.414.222.973.467.34.172.51.467.51.983 0 .59-.291.86-.923.86-.17 0-.462-.048-.924-.22-.802-.295-1.312-.467-1.434-.517-.316-.147-.559-.54-.656-1.13zm-.122-2.187v-3.072c-1.604-.516-3.16-.811-4.545-.811-3.111 0-4.643.983-4.643 3.023 0 1.057.462 1.868 1.386 2.31.753.418 1.653.64 2.82.64.972 0 1.895-.173 2.698-.59.632-.222 1.36-.762 2.284-1.5zM181.5 8.947c.51-.64.971-1.106 1.312-1.278.462-.295 1.045-.467 1.774-.467 1.143 0 2.115.59 2.99 1.794.583-.688 1.094-1.155 1.556-1.401.51-.295 1.215-.418 2.017-.418 2.48 0 3.743 1.229 3.743 3.662v11.773c0 .983-.34 1.45-1.094 1.45-.68 0-1.045-.467-1.045-1.45v-11.06c0-1.5-.632-2.31-1.847-2.31-.924 0-1.847.59-2.65 1.67v11.725c0 .983-.34 1.45-1.045 1.45-.705 0-1.045-.467-1.045-1.45v-10.84c0-1.67-.68-2.506-2.017-2.506-.851 0-1.653.59-2.528 1.671v11.675c0 .983-.34 1.45-1.094 1.45-.68 0-1.045-.467-1.045-1.45V8.234c0-.688.291-1.057.85-1.057.292 0 .584.221.754.639.316.32.413.737.413 1.13zM200.167 8.947c1.604-1.156 3.5-1.745 5.566-1.745 4.351 0 6.539 1.868 6.539 5.505v6.046c0 1.746-.632 3.073-1.848 4.056-1.094.86-2.576 1.327-4.472 1.327-2.236 0-4.132-.59-5.81-1.794v6.857c0 1.057-.34 1.573-1.045 1.573-.68 0-1.045-.516-1.045-1.573V8.775c0-1.057.292-1.573.85-1.573.293 0 .584.22.803.639.17.344.34.762.462 1.106zm0 11.035c1.483 1.328 3.33 2.04 5.445 2.04 1.312 0 2.357-.22 3.16-.762.972-.59 1.434-1.45 1.434-2.556v-6.046c0-1.278-.51-2.138-1.556-2.728-.802-.418-1.896-.64-3.209-.64-1.215 0-2.187.173-2.916.517-.681.295-1.435.934-2.358 1.868v8.307zM219.394 14.231c0-4.596 1.555-8.652 4.715-12.24 1.142-1.327 2.066-1.966 2.698-1.966.219 0 .462.049.632.22.17.173.292.345.292.59 0 .345-.413.86-1.216 1.672-3.281 3.195-4.934 7.128-4.934 11.847 0 5.235 1.726 9.463 5.105 12.707.68.64 1.045 1.155 1.045 1.573 0 .221-.122.467-.292.64-.17.171-.413.294-.632.294-.802 0-1.896-.934-3.33-2.777-2.77-3.441-4.083-7.62-4.083-12.56zM262.854 15.386c0 4.596-1.555 8.652-4.715 12.24-1.143 1.328-2.066 1.967-2.698 1.967-.22 0-.462-.05-.632-.222-.17-.172-.292-.417-.292-.639 0-.344.413-.86 1.215-1.622 3.282-3.195 4.935-7.128 4.935-11.847 0-5.235-1.726-9.462-5.105-12.707-.68-.639-1.045-1.155-1.045-1.573 0-.221.121-.467.292-.639.17-.172.413-.295.632-.295.753 0 1.896.934 3.33 2.778 2.698 3.514 4.083 7.693 4.083 12.56zM251.02 28.6h-19.89a1.226 1.226 0 01-1.216-1.23c0-.677.487-1.23 1.217-1.23h19.89c.608 0 1.216.492 1.216 1.23s-.486 1.23-1.216 1.23zM236.919 2.507s1.653 1.155 1.653 3.244c0 3.613-4.862 7.644-4.862 11.38 0 4.056 3.063 6.71 6.028 7.497.414.098.608-.394.073-.516-1.19-.295-2.552-1.893-2.552-4.4 0-2.31 2.188-3.17 3.087-4.301.9-1.155.68-2.606.17-3.023-.535-.418-.17-.984.778-.32.948.664 1.75 1.917 1.458 3.122-.364 1.523.122 2.408.9 2.507.778.098 1.653-.295 1.58-1.033-.098-.737-.535-1.524-.268-1.524.56 0 1.75 1.401 1.75 3.613 0 2.213-1.823 3.761-2.357 4.35-.34.345.097.812.559.59.218-.098.705-.392 1.02-.614 1.435-1.032 3.67-3.121 3.67-7.005 0-4.055-1.53-5.874-3.062-7.373-1.531-1.524-1.92-1.13-1.482-.393 1.312 2.26.51 3.023-.438 3.023-1.118 0-1.191-2.556-1.629-4.523-.972-4.35-4.86-5.087-5.59-5.137-.705.025-1.361.467-.486.836z' transform='translate(-4 -6) translate(4 6)' /> </g> </svg> ); } freeCodeCampLogo.displayName = 'freeCodeCampLogo'; export default freeCodeCampLogo; </ins>

import React from 'react'; <del> const fCClogo = 'https://s3.amazonaws.com/freecodecamp/freecodecamp_logo.svg'; </del> <ins> import freeCodeCampLogo from '../../../assets/icons/freeCodeCampLogo'; </ins> function NavLogo() { <del> return ( <picture> <img alt='learn to code at freeCodeCamp logo' className='nav-logo' src={fCClogo} /> </picture> ); </del> <ins> return <freeCodeCampLogo />; </ins> } NavLogo.displayName = 'NavLogo';

background-color: var(--theme-color); } <del> #universal-nav-logo img { </del> <ins> #universal-nav-logo svg { </ins> display: block; width: auto; height: 25px;