ab-nextjs-icons 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### 0.1.1 (2025-03-09)

package/README.md

@@ -59,10 +59,11 @@ pnpm install ab-nextjs-icons
 
 A list of all the supported **icons** and their current status:
 
-| No. | Name | Status |
-|:----|:-----|:-------|
-| 1 | *`Material Icons`* | Pending |
-| 2 | *`Ant Design Icons`* | Pending |
+| No. | Name | File | Status |
+|:----|:-----|:-----|:-------|
+| 1 | *`Material Icons`* | **`css/material-icons.css`** | [Done](./css/material-icons.css) |
+| 2 | *`Ant Design Icons`* | **`css/ant-design-icons.css`** | Pending |
+| 3 | *`Logos`* | **`css/logos.css`** | Pending |
 
 > NOTE: See google's [material icons/symbols](https://fonts.google.com/icons) for more details.
 

package/css/material-icons.css

@@ -0,0 +1,188 @@
+/* 
+* @license MIT
+* ~~~~~~~~~~~~
+* ab-nexts-icons 
+* ~~~~~~~~~~~~ 
+* Copyright (c) 2024 Abraham Ukachi. The AbElements Project.
+*
+* Permission is hereby granted, free of charge, to any person obtaining a copy
+* of this software and associated documentation files (the 'Software'), to deal
+* in the Software without restriction, including without limitation the rights
+* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+* copies of the Software, and to permit persons to whom the Software is
+* furnished to do so, subject to the following conditions: 
+*  
+* The above copyright notice and this permission notice shall be included in all 
+* copies or substantial portions of the Software. 
+*
+* THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 
+* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 
+* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+* SOFTWARE.
+*
+* @project: ab-nextjs-icons 
+* @name: Material Icons
+* @file: css/material-icons.css
+* @type: CSS Stylesheet
+* @authors: Abraham Ukachi <abrahamukachi@gmail.com>
+*
+* Example usage:
+*   1+|> 
+*    -|> 
+*
+*/
+
+
+
+/*
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+* MOTTO: We'll always do more 😜!!!
+* !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
+*/
+
+
+
+
+@import 'material-symbols';
+
+
+
+
+
+
+
+
+/* ====<<< Material Icons >>>==== */
+/* https://developers.google.com/fonts/docs/material_icons#icon_font_for_the_web */
+
+/* Material Icons */
+@font-face {
+  font-family: 'Material Icons';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons'),
+    local('MaterialIconsOutlined-Regular'),
+    url('../material-icons/MaterialIconsOutlined-Regular.otf') format('opentype');
+}
+
+
+/* Round Material Icons */
+@font-face {
+  font-family: 'Material Icons Round';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Material Icons Round'),
+    local('MaterialIconsRound-Regular'),
+    url('../material-icons/MaterialIconsRound-Regular.otf') format('opentype');
+}
+
+/* ====>>> End of Material Icons <<<==== */
+
+
+
+
+
+
+
+
+
+
+
+/* 
+ * --> Narrow - Device <--
+ * Phone: ? (Responsive)
+ * Dimension: ~460px (width)
+ *
+ * ***************************************
+ * when the viewport is lesser than 460px,
+ * layout changes to a narrow-layout.
+ * ***************************************
+ */
+
+/* ==== MATERIAL SYMBOLS ==== */
+.material-symbols-rounded {
+  font-variation-settings:
+  'FILL' 0,
+  'wght' 400,
+  'GRAD' 0,
+  'opsz' 24;
+}
+
+
+
+/* ==== MATERIAL ICONS ==== */
+
+/* Material Icons / Outlined + Round */
+.material-icons, .material-icons-outlined, .material-icons-round {
+  font-family: 'Material Icons';
+  font-weight: normal;
+  font-style: normal;
+  font-size: var(--material-icon-size, 24px); /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+
+  /* Support for all Webkit browsers. */
+  -webkit-font-smoothing: antialiased;
+  /* Support for Safari and Chrome. */
+  text-rendering: optimizeLegibility;
+
+  /* Support for Firefox. */
+  -moz-osx-font-smoothing: grayscale;
+  
+  /* Support for IE. */
+  font-feature-settings: 'liga';
+}
+
+/* Round Material Icons */
+.material-icons-round {
+  font-family: 'Material Icons Round' !important;
+}
+
+/* Rules for sizing the icon. */
+.material-icons.md-18, .material-icons-round.md-18 { font-size: 18px; }
+.material-icons.md-24, .material-icons-round.md-24 { font-size: 24px; }
+.material-icons.md-36, .material-icons-round.md-36 { font-size: 36px; }
+.material-icons.md-48, .material-icons-round.md-48 { font-size: 48px; }
+
+
+
+
+/* 
+ * --> Wide - Layout <--
+ * Phone: ? (Responsive)
+ * Dimension: 460px+ (width)
+ *
+ * ***************************************
+ * when the viewport is bigger than 460px,
+ * layout changes to wide-layout.
+ * ***************************************
+ */
+@media (min-width: 460px) {}
+
+
+
+/* 
+ * --> Tablet - Device <--
+ * Phone: ? (Responsive)
+ * Width: 768px <-to-> 1024px
+ */
+@media (min-width: 768px) and (max-width: 1024px) {}
+
+
+/* 
+ * --> Laptop - Device <--
+ * Phone: ? (Responsive)
+ * Width: 1024px <-to-> 2560px
+ */
+@media (min-width: 1024px) and (max-width: 2560px) {}
+
+
+/* ==== END of MATERIAL-ICONS - ICONS STYLES ==== */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ab-nextjs-icons",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "⭐️ A lightweight collection of icons for abElements created by Abraham Ukachi, and optimized for Next.js applications 😎.",
   "main": "index.ts",
   "types": "types/index.d.ts",
@@ -27,6 +27,9 @@
     "email": "abraham.ukachi@laplateforme.io"
   },
   "license": "MIT",
+  "dependencies": {
+    "material-symbols": "^0.29.0"
+  },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   }