question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[cookbook idea] Simple, customisable static icons using provide / inject

See original GitHub issue

A cool addition to the icons example would to use provide/inject rather than building a bunch of discrete icon files and having to import them all.

This way, you only ever need to update the icons.js file, and provide/inject allows the single Icon class to render different content without any additional edits or imports.

Additionally, you can also just save icons as raw SVGs which keeps them editable AND previewable!

Gist here: https://gist.github.com/davestewart/54b6823a76500fdcdd918fc5ce575d4c

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:7 (4 by maintainers)

github_iconTop GitHub Comments

1reaction
egoistcommented, Mar 20, 2018

I prefer using icons directly over provide/inject, like:

// Icon.js
import icons from './icons'

export default {
	props: ['name'],
	render(h) {
		return h('span', null, icons[this.name])
	}
}
0reactions
sdrascommented, Mar 20, 2018

The cookbook is intended to show people a deep dive into a certain way of working, while also showing alternative methods. The other way of working you showed skips out on many important steps: optimizing, making the SVGs accessible, and making them editable. Using icons in myriad ways across a codebase is extremely important. Optimization is also an important step- I worked on a codebase where I reduced the load from 10 seconds to 2 seconds by properly optimizing their SVG!

Even using the loaders have a number of steps to have them work properly.

Every way of working has it’s benefits, and it’s pitfalls. If you’d like to submit a recipe, I’m all for it. If this issue is submitted because it’s not your personal preference to work the way that the recipe suggests, I’ll close the issue, you don’t have to work that way 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

A curated list of awesome things related to Vue.js - GitHub
js SSR boilerplate with Nuxt, Element (custom theme) and Vue Apollo. vue-daily-zhihu a simple demo build with Vue 2.0 & vue-router & vuex...
Read more >
Icon System with SVG Sprites - CSS-Tricks
Icon System with SVG Sprites · Combine the .svg files · Inject that SVG at the top of the document · Use the...
Read more >
Dependency injection in Android | Android Developers
Static solutions that generate the code to connect dependencies at compile time. Dagger is a popular dependency injection library for Java, ...
Read more >
How to Create a Portfolio Website Using HTML, CSS ...
Then I'll show you how to create a beautiful responsive portfolio website for yourself using HTML, CSS, JavaScript and Bootstrap version 5.
Read more >
4. Serial Communications - Arduino Cookbook [Book] - O'Reilly
The Arduino IDE (described in Recipe 1.3) provides a Serial Monitor (shown ... the “right way” is the one you find easiest to...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found