@grafana/components 0.0.38 → 0.0.40

package/README.md

@@ -33,6 +33,29 @@ const MyApp = () => {
 };
 ```
 
+### Icons
+
+The icons included with `@grafana/components` are based on [Lucide][lucide],
+which provides over 1,800 consistent icons. In addition, there are a smaller
+number of custom icons available. All custom icons are sourced from
+`src/icons/svg`, whereas the Lucide icons are sourced from the `lucide-static`
+package.
+
+Since Lucide’s [icon design principles][lucide-icon-design-principles] state you
+should design your icon to use stroked paths, should you need to use solid
+filled shapes in your icon, you will need to make sure it follows the right
+approach:
+
+- The `<path>` elements should be devoid of any style attributes or other
+  properties (i.e. only the `d` property should exist)
+- The root level `<svg>` element should have the `fill="solid"` attribute
+  property
+
+The latter property is important when running `yarn import:icons` to ensure the
+component will render with a solid fill and no stroke. You should also try to
+follow the icon design principles where possible to keep it consistent with
+other icons.
+
 ...
 
 ### Publishing
@@ -51,3 +74,6 @@ package (you will be prompted to enter a 2FA code again):
 ```
 yarn build:publish
 ```
+
+[lucide]: https://lucide.dev
+[lucide-icon-design-principles]: https://lucide.dev/guide/design/icon-design-guide