✨ Replace feather icons for lucide

✨ Replace feather icons for lucide

app.css

@@ -26,12 +26,6 @@
   --sfg: #3a3a3a; /* Sceondary Foreground color */
 
   /* Image background  */
-
-  /* Uncoment this section to get the 
-    image wallpaper. You can also 
-    change the --imgcol value 
-    to make the filter to your own */
-
   --imgbg: url(assets/background.jpg);
   --imgcol: linear-gradient(
     rgba(255, 255, 255, 0.7),
@@ -94,7 +88,7 @@ body {
   background-color: #00000000;
 }
 
-#themeButton__icon {
+#themeIcon {
   width: 25px;
   height: 25px;
 }
@@ -138,14 +132,14 @@ body {
   justify-content: center;
 }
 
-.weatherBlock__date {
+.date {
   display: flex;
   align-items: center;
   justify-content: center;
   margin-top: 30px;
 }
 
-.weatherBlock__weather {
+.weather {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,25 +175,25 @@ body {
   color: var(--fg);
 }
 
-.weather-icon img {
+.weatherIcon img {
   width: 70px;
   height: 70px;
 }
 
-.temperature-value p {
+.weatherValue p {
   font-size: var(--fss);
   font-weight: bolder;
   margin-left: 15px;
   color: var(--fg);
 }
 
-.temperature-description p {
+.weatherDescription p {
   font-size: var(--fss);
   margin-left: 15px;
   color: var(--fg);
 }
 
-.buttonLink {
+.buttons {
   grid-row: 3 / span 2;
   grid-column: 1 / span 2;
   display: grid;
@@ -209,7 +203,7 @@ body {
   padding: 20px;
 }
 
-.buttonLink__link {
+.buttons__link {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -222,34 +216,34 @@ body {
   color: var(--fg);
 }
 
-.buttonLink__link-1 {
+.buttons__link-1 {
   grid-row: 1;
   grid-column: 1;
 }
-.buttonLink__link-2 {
+.buttons__link-2 {
   grid-row: 1;
   grid-column: 2;
 }
-.buttonLink__link-3 {
+.buttons__link-3 {
   grid-row: 2;
   grid-column: 1;
 }
-.buttonLink__link-4 {
+.buttons__link-4 {
   grid-row: 2;
   grid-column: 2;
 }
-.buttonLink__link-5 {
+.buttons__link-5 {
   grid-row: 1;
   grid-column: 3;
 }
-.buttonLink__link-6 {
+.buttons__link-6 {
   grid-row: 2;
   grid-column: 3;
 }
-.buttonLink__link:hover {
+.buttons__link:hover {
   background-color: var(--accent);
 }
-.buttonLink__link:hover svg {
+.buttons__link:hover svg {
   stroke: var(--sfg);
 }
 
@@ -288,7 +282,6 @@ body {
 .list__link:hover {
   background-color: var(--accent);
   color: var(--sfg);
-  
 }
 
 /* M E D I A - Q U E R I E S */
@@ -316,8 +309,11 @@ body {
     display: none;
   }
 
-  .buttonLink {
+  .buttons {
     grid-column: 1 / span 4;
+  }
+
+  .buttonLink {
     grid-gap: 3vw;
     padding-left: 100px;
     padding-right: 100px;

assets/js/cards.js

@@ -11,9 +11,9 @@ const printCards = () => {
         <a
           href="${card.link}"
           target="${CONFIG.openInNewTab ? '_blank' : ''}"
-          class="buttonLink__link card buttonLink__link-${card.id}"
+          class="buttons__link  card buttonLink__link-${card.id}"
         >
-          <i class="buttonLink__icon" data-feather="${card.icon}"></i>
+          <i class="buttonLink__icon" icon-name="${card.icon}"></i>
         </a>
     `;
 

assets/js/greeting.js

@@ -19,9 +19,12 @@ const gree4 = `${CONFIG.greetingEvening}\xa0`;
 if (hour >= 23 || hour < 5) {
   document.getElementById('greetings').innerText = gree1 + name;
 } else if (hour >= 6 && hour < 12) {
-  document.getElementById('greetings').innerText = gree2 + name;
+  document.getElementById('greetings').innerText =
+    gree2 + name;
 } else if (hour >= 12 && hour < 17) {
-  document.getElementById('greetings').innerText = gree3 + name;
+  document.getElementById('greetings').innerText =
+    gree3 + name;
 } else {
-  document.getElementById('greetings').innerText = gree4 + name;
+  document.getElementById('greetings').innerText =
+    gree4 + name;
 }

assets/js/lists.js

@@ -4,7 +4,7 @@
 
 // Print the first List
 const printFirstList = () => {
-  let icon = `<i class="list__head" data-feather="${CONFIG.firstListIcon}"></i>`;
+  let icon = `<i class="list__head" icon-name="${CONFIG.firstListIcon}"></i>`;
   const position = 'beforeend';
   list_1.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.firstList) {
@@ -24,7 +24,7 @@ const printFirstList = () => {
 
 // Print the second List
 const printSecondList = () => {
-  let icon = `<i class="list__head" data-feather="${CONFIG.secondListIcon}"></i>`;
+  let icon = `<i class="list__head" icon-name="${CONFIG.secondListIcon}"></i>`;
   const position = 'beforeend';
   list_2.insertAdjacentHTML(position, icon);
   for (const link of CONFIG.lists.secondList) {

assets/js/theme.js

@@ -11,16 +11,16 @@ const bodyBackground = document.getElementById('#body');
 const enableDark = () => {
   document.body.classList.add('darktheme');
   localStorage.setItem('darkTheme', 'enabled');
-  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="sun"></i>`;
+  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="sun"></i>`;
-  feather.replace();
+  lucide.createIcons();
 };
 
 // Remove Dark theme
 const disableDark = () => {
   document.body.classList.remove('darktheme');
   localStorage.setItem('darkTheme', null);
-  themeToggle.innerHTML = `<i id="themeButton__icon" data-feather="moon"></i>`;
+  themeToggle.innerHTML = `<i id="themeButton__icon" icon-name="moon"></i>`;
-  feather.replace();
+  lucide.createIcons();
 };
 
 //Toggle theme

assets/js/weather.js

@@ -3,8 +3,12 @@
 // └┴┘└─┘┴ ┴ ┴ ┴ ┴└─┘┴└─
 
 const iconElement = document.querySelector('.weather-icon');
-const tempElement = document.querySelector('.temperature-value p');
+const tempElement = document.querySelector(
-const descElement = document.querySelector('.temperature-description p');
+  '.temperature-value p'
+);
+const descElement = document.querySelector(
+  '.temperature-description p'
+);
 
 // App data
 const weather = {};

config.js

@@ -54,7 +54,7 @@ const CONFIG = {
       id: '3',
       name: 'Todoist',
       icon: 'trello',
-      link: 'https://calendar.google.com/calendar/r',
+      link: 'https://todoist.com',
     },
     {
       id: '4',
@@ -65,7 +65,7 @@ const CONFIG = {
     {
       id: '5',
       name: 'Reddit',
-      icon: 'bookmark',
+      icon: 'glasses',
       link: 'https://reddit.com',
     },
     {

index.html

@@ -9,7 +9,7 @@
       href="assets/icons/favicon.png"
     />
     <link rel="stylesheet" href="app.css" />
-    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
   </head>
 
   <!-- 
@@ -20,7 +20,7 @@
 
   <body class="">
     <button id="themeButton">
-      <i id="themeButton__icon" data-feather="moon"></i>
+      <i id="themeIcon" icon-name="moon"></i>
     </button>
     <div class="container">
       <!-- Clock and Greetings  -->
@@ -37,18 +37,18 @@
       <!-- Date and Weather  -->
 
       <div class="weatherBlock">
-        <div class="weatherBlock__date">
+        <div class="date">
           <div id="month" class=""></div>
           <div id="day" class=""></div>
         </div>
-        <div class="weatherBlock__weather">
+        <div class="weather">
-          <div class="weather-icon">
+          <div class="weatherIcon">
             <img src="assets/icons/OneDark/unknown.png" />
           </div>
-          <div class="temperature-value">
+          <div class="weatherValue">
             <p class="">- °<span class="g">c</span></p>
           </div>
-          <div class="temperature-description">
+          <div class="weatherDescription">
             <p class=""></p>
           </div>
         </div>
@@ -60,7 +60,7 @@
         └─┘└─┘ ┴  ┴ └─┘┘└┘└─┘ 
         -->
 
-      <div class="buttonLink" id="buttonsContainer"></div>
+      <div class="buttons" id="buttonsContainer"></div>
 
       <!-- 
         ┬  ┬┌─┐┌┬┐┌─┐
@@ -85,7 +85,7 @@
     <script src="assets/js/cards.js"></script>
     <script src="assets/js/lists.js"></script>
     <script>
-      feather.replace();
+      lucide.createIcons();
     </script>
   </body>
 

package.json

@@ -2,6 +2,6 @@
   "name": "bento",
   "version": "1.2.0",
   "description": "🍱 Minimalist, elegant and hackable startpage inspired by the Bento box!",
-  "author": "Miguel R. Ávila",
+  "author": "Miguel Ávila",
   "license": "ISC"
-}
+}