Merge pull request #6 from perimetre/1.1

1.1.5
perimetre · Feb 24, 2021 · ead8e6c · ead8e6c
2 parents 4572f19 + 875ac62
commit ead8e6c
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -23,6 +23,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [1.1.5] - 2021-02-24
+
+### Added
+
+- Search icon
+
 ## [1.1.4] - 2021-02-24
 
 ### Added

diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"

diff --git a/src/components/Icons/Singletone/SearchIcon.tsx b/src/components/Icons/Singletone/SearchIcon.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import classnames from 'classnames';
+
+/**
+ * SearchIcon icon to use with JSX
+ *
+ * @param props the icon props
+ * @param props.className the icon classname value
+ */
+export const SearchIcon: React.FC<React.SVGProps<SVGSVGElement>> = ({ className, ...props }) => (
+  <svg width="16" height="16" viewBox="0 0 16 16" {...props} className={classnames('fill-current', className)}>
+    <path d="M16 14.767l-3.906-3.905a6.029 6.029 0 001.233-3.7A6.126 6.126 0 007.164 1 6.127 6.127 0 001 7.164a6.127 6.127 0 006.164 6.164 6.029 6.029 0 003.7-1.233L14.767 16 16 14.767zM4.038 4.041A4.36 4.36 0 017.16 2.764a4.36 4.36 0 014.4 4.4 4.36 4.36 0 01-4.4 4.4 4.36 4.36 0 01-4.4-4.4 4.36 4.36 0 011.277-3.123z" />
+  </svg>
+);
+
+/**
+ * SearchIcon icon to use with CSS
+ */
+export const SearchIconURL = `url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%2014.767l-3.906-3.905a6.029%206.029%200%20001.233-3.7A6.126%206.126%200%20007.164%201%206.127%206.127%200%20001%207.164a6.127%206.127%200%20006.164%206.164%206.029%206.029%200%20003.7-1.233L14.767%2016%2016%2014.767zM4.038%204.041A4.36%204.36%200%20017.16%202.764a4.36%204.36%200%20014.4%204.4%204.36%204.36%200%2001-4.4%204.4%204.36%204.36%200%2001-4.4-4.4%204.36%204.36%200%20011.277-3.123z%22%2F%3E%3C%2Fsvg%3E')`;
diff --git a/src/components/Icons/index.css b/src/components/Icons/index.css
@@ -155,4 +155,19 @@
       mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M8%200a8%208%200%20110%2016A8%208%200%20018%200zm.108%2010.5c-.348%200-.348%200-.576.234-.228.234-.228.234-.228.558%200%20.312%200%20.312.234.546.234.234.234.234.57.234.348%200%20.348%200%20.576-.24.228-.24.228-.24.228-.552%200-.324%200-.324-.228-.552-.228-.228-.228-.228-.576-.228zm.072-7.176c-.504%200-.504%200-.948.15-.444.15-.444.15-.786.438-.342.288-.342.288-.57.702-.182.331-.182.331-.265.728l-.035.202%201.152.132c.06-.552.06-.552.42-.936s.36-.384.96-.384c.576%200%20.576%200%20.942.342s.366.342.366.918c0%20.42%200%20.42-.174.69-.13.202-.13.202-.312.381l-.126.117-.444.42c-.204.192-.204.192-.366.378s-.162.186-.276.39c-.114.204-.114.204-.174.456-.04.168-.04.168-.053.363l-.007.201v.576h1.128v-.42c0-.3%200-.3.042-.504.042-.204.042-.204.138-.372s.096-.168.264-.33.168-.162.408-.366c.252-.216.252-.216.468-.42.216-.204.216-.204.366-.438s.15-.234.234-.522c.084-.288.084-.288.084-.672%200-.54%200-.54-.192-.954-.192-.414-.192-.414-.528-.696s-.336-.282-.774-.426c-.438-.144-.438-.144-.942-.144z%22%2F%3E%3C%2Fsvg%3E');
     }
   }
+
+  .pui-icon-search {
+    --pui-absolute-icon-size: 16px;
+    &::after {
+      /* By setting the bg color, the color of the icon itself is set */
+      @apply bg-pui-placeholder-color;
+
+      /* The size to correctly mask the icon */
+      height: 16px;
+      width: 16px;
+
+      /* If updating the icon, use the optimize page to generate a new string */
+      mask-image: url('data:image/svg+xml,%3Csvg%20width%3D%2216%22%20height%3D%2216%22%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M16%2014.767l-3.906-3.905a6.029%206.029%200%20001.233-3.7A6.126%206.126%200%20007.164%201%206.127%206.127%200%20001%207.164a6.127%206.127%200%20006.164%206.164%206.029%206.029%200%20003.7-1.233L14.767%2016%2016%2014.767zM4.038%204.041A4.36%204.36%200%20017.16%202.764a4.36%204.36%200%20014.4%204.4%204.36%204.36%200%2001-4.4%204.4%204.36%204.36%200%2001-4.4-4.4%204.36%204.36%200%20011.277-3.123z%22%2F%3E%3C%2Fsvg%3E');
+    }
+  }
 }
diff --git a/src/components/Icons/index.tsx b/src/components/Icons/index.tsx
@@ -7,3 +7,4 @@ export * from './Singletone/AttentionIcon';
 export * from './Singletone/Attention2Icon';
 export * from './Singletone/BellIcon';
 export * from './Singletone/QuestionIcon';
+export * from './Singletone/SearchIcon';