search

therufa / mdi-vue

Material design icons for vue.js
https://www.npmjs.com/package/mdi-vue
MIT License
88 stars 13 forks source link

Document icon naming or allow different names #47

Closed chaptergy closed 3 years ago

chaptergy commented 3 years ago

Basically the same issue as #3. Knowing how to use icons with multiple words (e.g. arrowBack) would be great.

An alternative would be to automatically remove all dashes and replace the following character with an uppercase one. This way using the name displayed on materialdesignicons.com works.

Thanks for your effort!

therufa commented 3 years ago

Hi @chaptergy, thanks for bringing this up! The issue seems to be that it's not clear what the naming convention of the icons is if I'm not mistaken. The answer for this is rather simple, the icon names must be provided in camelCaseStyle although the point you made about snake-case makes more than sense.

So basically we could address the icons with the same syntax as we have them on materialdesignicons.com like this:

<mdicon name="database-plus-outline" />

As of what we have now, which is:

<mdicon name="databasePlusOutline" /> // or
<mdicon name="DatabasePlusOutline" />
chaptergy commented 3 years ago

Yes, exactly. Just documenting the naming convention would be enough.

However if there is enough time allowing snake case would be an even better option, since the user can copy the name directly, yes. But this should probably only be in addition to camelCase or PascalCase, because changing it outright would break a lot of apps. Then the new additional snake-case parser could only be called if the name contains any dashes. At least I can't think of a case where this could break, since the icon names should only contain letters and numbers.

therufa commented 3 years ago

I'm closing this issue, since the lib does now accept names in multiple formats.