Dev.to•Jan 29, 2026, 5:15 PM
Dev unleashes <link-icon> web component: urls now magically sprout platform icons, sparing teams from svg hell and endless standup debates

Dev unleashes <link-icon> web component: urls now magically sprout platform icons, sparing teams from svg hell and endless standup debates

A custom element called link-icon has been created to automatically display icons next to links based on their URL. The element uses pattern matching to detect which platform a URL belongs to and returns the corresponding icon. It supports various platforms including Twitter, GitHub, LinkedIn, Instagram, and YouTube, and displays a generic link icon if the URL does not match any known pattern. The code is available on GitHub and utilizes Phosphor Icons, a library known for its consistent and well-designed icons. The link-icon element can be easily integrated into any project, including Rails apps, by adding the JavaScript file to the project directory and importing it in the application.js file. This custom element provides a reusable and reactive solution for displaying link icons, making it a useful tool for developers. The element's use of Shadow DOM ensures that its styles are isolated, preventing conflicts with global CSS styles.

Viral Score: 75%

More Roasted Feeds

No news articles yet. Click "Fetch Latest" to get started!