jenkins-bot has submitted this change and it was merged. (
https://gerrit.wikimedia.org/r/379737 )
Change subject: Chore: Add Icon component with menu and search icons
......................................................................
Chore: Add Icon component with menu and search icons
Will be used soon in the Header.
This initial version renders icons as inline svgs in order to be able to
style them differently and render them at different screen dpi without
having to generate multiple assets.
In the future we can add parameters to the Icon component, like size,
style, etc to have a flexible icon system.
Bug: T173022
Change-Id: I9b838274e5ab306967062109f5504443e85ae796
---
A src/common/components/icon/icon.css
A src/common/components/icon/icon.tsx
A src/common/components/icon/icons/menu.svg
A src/common/components/icon/icons/search.svg
4 files changed, 31 insertions(+), 0 deletions(-)
Approvals:
Niedzielski: Looks good to me, approved
jenkins-bot: Verified
diff --git a/src/common/components/icon/icon.css
b/src/common/components/icon/icon.css
new file mode 100644
index 0000000..bb76e0b
--- /dev/null
+++ b/src/common/components/icon/icon.css
@@ -0,0 +1,11 @@
+.Icon {
+ display: inline-block;
+ vertical-align: middle;
+ --icon-size: 20px;
+ width: var(--icon-size);
+ height: var(--icon-size);
+}
+.Icon > svg {
+ width: var(--icon-size);
+ height: var(--icon-size);
+}
diff --git a/src/common/components/icon/icon.tsx
b/src/common/components/icon/icon.tsx
new file mode 100644
index 0000000..4d7492a
--- /dev/null
+++ b/src/common/components/icon/icon.tsx
@@ -0,0 +1,14 @@
+import { h } from "preact";
+import menu from "./icons/menu.svg";
+import search from "./icons/search.svg";
+import "./icon.css";
+
+export interface Props {
+ svg: string;
+}
+
+export { menu, search };
+
+export default function Icon({ svg }: Props): JSX.Element {
+ return <div class="Icon" dangerouslySetInnerHTML={{ __html: svg }} />;
+}
diff --git a/src/common/components/icon/icons/menu.svg
b/src/common/components/icon/icons/menu.svg
new file mode 100644
index 0000000..6a59bee
--- /dev/null
+++ b/src/common/components/icon/icons/menu.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="19" height="14" viewBox="0 0 19
14">
+ <path fill="#54595D" fill-rule="evenodd" d="M19
14H0v-2h19v2zm0-6H0V6h19v2zm0-6H0V0h19v2z"/>
+</svg>
diff --git a/src/common/components/icon/icons/search.svg
b/src/common/components/icon/icons/search.svg
new file mode 100644
index 0000000..3d3cab2
--- /dev/null
+++ b/src/common/components/icon/icons/search.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg"; width="20" height="20" viewBox="0 0 20
20">
+ <path fill="#54595D" fill-rule="evenodd" d="M14.474 13.441c1.147-1.376
1.835-3.212 1.835-5.162A7.98 7.98 0 0 0 8.279.25 7.98 7.98 0 0 0 .25 8.28a7.98
7.98 0 0 0 8.03 8.029c1.72 0 3.211-.459 4.473-1.377l4.473 4.474c.46.459
1.262.459 1.836 0l.688-.688-5.276-5.277zM2.544 8.28c0-3.211 2.524-5.735
5.735-5.735 3.212 0 5.736 2.524 5.736 5.735 0 3.212-2.524 5.736-5.736
5.736-3.211 0-5.735-2.638-5.735-5.736z"/>
+</svg>
--
To view, visit https://gerrit.wikimedia.org/r/379737
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: I9b838274e5ab306967062109f5504443e85ae796
Gerrit-PatchSet: 1
Gerrit-Project: marvin
Gerrit-Branch: master
Gerrit-Owner: Jhernandez <[email protected]>
Gerrit-Reviewer: Niedzielski <[email protected]>
Gerrit-Reviewer: jenkins-bot <>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
