andrea/phosphor-icons
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DetailsPanel+README: switch to kebab-case for Vue components

Browse Source
This commit is contained in:
rektdeckard
2020-11-24 00:38:52 -05:00
parent 0ea6cdc930
commit fe656731fd
2 changed files with 9 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@@ -4,7 +4,7 @@
Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really. Phosphor is a flexible icon family for interfaces, diagrams, presentations — whatever, really.
- 588 icons and counting - 683 icons and counting
- 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone** - 6 weights: **Thin**, **Light**, **Regular**, **Bold**, **Fill**, and **Duotone**
- Designed at 16 x 16px to read well small and scale up big - Designed at 16 x 16px to read well small and scale up big
- Raw stroke information retained to fine-tune the style - Raw stroke information retained to fine-tune the style
@@ -67,9 +67,9 @@ ReactDOM.render(<App />, document.getElementById("root"));
```html ```html
<template> <template>
<div> <div>
<PhHorse /> <ph-horse />
<PhHeart :size="32" color="hotpink" weight="fill" /> <ph-heart :size="32" color="hotpink" weight="fill" />
<PhCube /> <ph-cube />
</div> </div>
</template> </template>
@@ -86,7 +86,7 @@ ReactDOM.render(<App />, document.getElementById("root"));
</script> </script>
``` ```
> **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. > **Note:** Due to possible namespace collisions with built-in HTML elements, compononent names in the Vue library are prefixed with `Ph`, but otherwise follow the same naming conventions. Both Pascal and kebab-case conventions can be used in templates.
## Related Projects ## Related Projects

5
src/components/IconGrid/DetailsPanel.tsx
View File

@@ -82,7 +82,10 @@ const DetailsPanel: React.FC<InfoPanelProps> = (props) => {
react: `<${Icon.displayName} size={${size}} ${ react: `<${Icon.displayName} size={${size}} ${
color !== "#000000" ? `color="${color}" ` : "" color !== "#000000" ? `color="${color}" ` : ""
}${weight === "regular" ? "" : `weight="${weight}" `}/>`, }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
vue: `<Ph${Icon.displayName} :size="${size}" ${ vue: `<ph${Icon.displayName!!.replace(
/([a-z0-9]|(?=[A-Z]))([A-Z])/g,
"$1-$2"
).toLowerCase()} :size="${size}" ${
color !== "#000000" ? `color="${color}" ` : "" color !== "#000000" ? `color="${color}" ` : ""
}${weight === "regular" ? "" : `weight="${weight}" `}/>`, }${weight === "regular" ? "" : `weight="${weight}" `}/>`,
}; };