COVID19 Lockdown Dev Log – Day 16, Favicons And Webpack Imports
What I Worked On
SEO optimization and webpack imports.
What I Learned
I was doing some importing of icons for my <head> element, which I add metadata to with React Helmet. I imported the icons into my ‘seo.js’ component like this:
// seo.js
import androidIcon36x36 from "../../assets/favicon/android-icon-36x36.png";I then came accross this solution while browing for “good practice” for importing icons in your <head>
// seo.js
import androidIcon36x36 from "@assets/favicon/android-icon-36x36.png";I thought that looked a lot cleaner with ‘@’ instead of ‘../../’ so I looked into how to do that. Long story short, it’s a Webpack configuration. Gatsby uses Webpack and has it available as a plugin – yay! Let’s install it:
npm install gatsby-plugin-alias-importsAdd it to the Gatsby plugins in my project:
// gatsby-config.js
{
resolve: `gatsby-plugin-alias-imports`,
options: {
alias: {},
extensions: []
}
},Now let’s tell the plugin that the folder it should create an ‘alias’ for. I need it to be an alias for the ‘src’ folder:
// gatsby-config.js
{
resolve: `gatsby-plugin-alias-imports`,
options: {
alias: {
"@": "src",
},
extensions: []
}
},Furthermore, I can add what file types/extensions to auto-find in the ‘extenstions’ array like so:
// gatsby-config.js
//...code
extensions: [
"png"
]The reason I omitted “js” in the ‘extensions’ array is because Gatsby already does that. Anyways! Now I can import files from the ‘src’ folder in a cleaner way 😀
// seo.js
//YES!
import androidIcon36x36 from "@/assets/favicon/android-icon-36x36.png";
//No
import androidIcon36x36 from "../../assets/favicon/android-icon-36x36.png";What Distracted Me During The Day
- A friend came by (we kept our distance, ofc.) 😀
- Discord
Resources
- Webpack Resolve Alias – https://webpack.js.org/configuration/resolve/
- Gatsby plugin – https://www.gatsbyjs.org/packages/gatsby-plugin-alias-imports/