Skip to content

feat: add routing icon support for *.route.ts and *.route.tsx#2917

Merged
PKief merged 2 commits intomaterial-extensions:mainfrom
Vaibhav-Naik-26:add-single-route-icon-support
Mar 13, 2025
Merged

feat: add routing icon support for *.route.ts and *.route.tsx#2917
PKief merged 2 commits intomaterial-extensions:mainfrom
Vaibhav-Naik-26:add-single-route-icon-support

Conversation

@Vaibhav-Naik-26
Copy link
Copy Markdown
Contributor

Description

  • Added support for *.route.js, *.route.jsx, *.route.ts and *.route.tsx files to show the routing.svg icon, similar to existing *.routes.js, *.routes.jsx, *.routes.ts and *.routes.tsx.

  • This change ensures that single route files (common in routes/ folders) get the correct icon, improving consistency.

Contribution Guidelines

@github-actions github-actions bot added the icons PR with new icons label Mar 2, 2025
Copy link
Copy Markdown
Member

@PKief PKief left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From my point of view the current icon isn't such a good fit for single route files. The icon currently shows a way sign which typically shows multiple routes. If we associate the icon to a single route it doesn't feel like a good fit from my point of view. This icon is rather made for route configs where multiple routes are configured than for a single route file.

image

@Vaibhav-Naik-26
Copy link
Copy Markdown
Contributor Author

I completely understand the point you're raising. Just to clarify the structure we're using:

In my project, I have a routes/ folder where each file is responsible for defining a set of related routes for a specific resource (for example, user.route.ts defines all the routes for the user resource — listing users, creating users, deleting users, etc.).

Here's an example of what a typical file (user.route.ts) looks like:

import { createUser, deleteUser, getAllUsers, getUserById } from '../controllers/user.controller.js';
import { Router } from 'express';

export const router = Router();

router
  .get('/', getAllUsers)
  .get('/:id', getUserById)
  .post('/create', createUser)
  .delete('/:id', deleteUser);

Even though each file focuses on one resource, it still defines multiple routes (GET, POST, DELETE, etc.), which is why I felt the current routing.svg icon was appropriate. These files are part of the overall routing layer, just structured in a more modular way.

My intention was to make all route-related files visually consistent, regardless of whether they handle the full app’s routes (routes.ts) or just a specific resource’s routes (user.route.ts). This naming and structure is fairly common in Express projects.

Copy link
Copy Markdown
Member

@PKief PKief left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Okay, let's give it a try. Your argumentation makes sense to me as well.

@PKief PKief merged commit 280284b into material-extensions:main Mar 13, 2025
2 checks passed
@github-actions
Copy link
Copy Markdown
Contributor

Merge Successful

Thanks for your contribution! 🎉

The changes will be part of the upcoming update on the Marketplace.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

icons PR with new icons

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants