Why aren't my SVGs rendering in Safari?

Emily Kondziola — Sat, 30 Oct 2021 00:34:57 +0000

Recently for work I created a react component where I was passing in an SVG as a prop. Everything looked good in chrome, but when I tested in safari I realized my SVGs weren't showing up.

After console.loging to make sure the prop was passed in correctly I eventually realized the SVG would only render when a height attribute was specified in the component being passed in.

const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon height="20rem" />
        }
      ]}
}

Another option is to define the className of the SVG in the parent component and add styling in the child where it's being rendered.

const Header = () => {
    <Menu 
        links={[
        {
          itemName: 'account settings'
          SVG: <AccountIcon className="svg-icon" />
        }
      ]}
}

My most used Bit commands

Emily Kondziola — Sat, 15 May 2021 17:37:48 +0000

Bit is a tool where you can upload components to the cloud ☁️ 🌈 so you can use them in other codebases, or import them to several files in one codebase. With Bit's built in version control uploading and editing components across several codebases and machines is easily manageable.

Although I love Bit, I experienced a learning curve with the commands. As a result here's an explanation of my most used Bit commands as a library metaphor.

1: Import a component

or check out a book

bit import seattle.seattle-public-library/harry-potter

Ok! So you've made it to the library and you've decided to read Harry Potter. Love that for you. You check it out and bring it home. This is essentially what you're doing when you "check out" a component from Bit's remote scope and import it into your codebase.

Breaking down the command: First you identify the workspace, which is the city of Seattle. Next you identify the namespace, or the building you're checking out the book from, the Seattle Public Library. Finally you identify the component to import, or the book to check out, Harry Potter.

2: Save changes you've made to a component

or write down that you read the book

bit status

bit tag -all

You finished the book! You write down the title on a list that you're keeping to log how many books you've read. This solidifies in your memory that you've read the book.

You only need to use these commands if you make a change to a component, or finish reading the book.

Breaking down the command: bit status checks to make sure there's no tracking issues, and bit tag --all updates the component version.

3: Export your updated component

or return your book after removing a page

bit export seattle.seattle-public-library --eject

You're ready to return the book, but to remember how much you enjoyed the book you rip out a page to keep with you. The library doesn't like it but they let it slide. After returning the book the librarians make note of the changes you've made and put the new version of the book back on the shelf.

Breaking down the command: To remove the component you've made changes to you only need to name the workspace and namespace. export will publish the updated component in Bit, and --eject will replace the component in your codebase with a node module.

4: Export your non-updated component

or return your book with no changes

bit eject seattle.seattle-public-library/harry-potter

In an alternate universe you didn't finish reading the book. You return it to the library without removing a page because you don't care to remember it. The librarians take note when they receive the book and do not update the version.

Breaking down the command: Importing a component, not making changes, and exporting requires a slightly different command. As you know, eject will replace the component with a node module and you don't need export because you don't need to publish a new version of the component.