Add 10 lucide icons and replace their legacy image consumers

openlibrary/macros/LocateButton.html

@@ -6,9 +6,9 @@
   <a class="cta-btn cta-btn--available cta-btn--w-icon cta-btn--external" href="$locateUrl" target="_blank" rel="noopener noreferrer"
     data-ol-link-track="CTAClick|Locate">
 
-    <span class="btn-icon map"></span>
+    $:macros.icon("map-pin", size="sm", extra_class="btn-icon")
     <span class="btn-label">$_("Locate")</span>
   </a>
 $else:
   <a class="cta-btn cta-btn--available cta-btn--external" href="$locateUrl" target="_blank" rel="noopener noreferrer"
-    data-ol-link-track="CTAClick|Locate">$_('Locate')</a>
+    data-ol-link-track="CTAClick|Locate">$_('Locate')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")</a>

openlibrary/macros/ReadButton.html

@@ -41,7 +41,7 @@
               title="$title using Read Aloud"
               $:analytics_attr(action.capitalize() + 'Listen')
               class="cta-btn cta-btn--available cta-btn--w-icon">
-              <span class="btn-icon listen"></span>
+              $:macros.icon("headphones", size="sm", extra_class="btn-icon")
               <span class="btn-label">$_("Listen")</span>
             </a>
           </li>

openlibrary/plugins/openlibrary/js/team.js

@@ -5,8 +5,6 @@ export function initTeamFilter() {
     // Photos
     const default_profile_image =
     '../../../static/images/openlibrary-180x180.png';
-    const bookUrlIcon = '../../../static/images/icons/icon_book-lg.png';
-    const personalUrlIcon = '../../../static/images/globe-solid.svg';
     const initialSearchParams = new URL(window.location.href).searchParams;
     const initialRole = initialSearchParams.get('role') || 'All';
     const initialDepartment = initialSearchParams.get('department') || 'All';
@@ -137,25 +135,25 @@ export function initTeamFilter() {
             descriptionLinks.classList = 'description__links';
             if (member.personal_url) {
                 const memberPersonalA = document.createElement('a');
-                const memberPersonalImg = document.createElement('img');
+                const memberPersonalIcon = document.createElement('ol-icon');
 
                 memberPersonalA.href = `${member.personal_url}`;
-                memberPersonalImg.src = personalUrlIcon;
-                memberPersonalImg.classList = 'links__site';
+                memberPersonalIcon.setAttribute('name', 'globe');
+                memberPersonalIcon.classList = 'links__site';
 
-                memberPersonalA.append(memberPersonalImg);
+                memberPersonalA.append(memberPersonalIcon);
                 descriptionLinks.append(memberPersonalA);
             }
 
             if (member.favorite_book_url) {
                 const memberBookA = document.createElement('a');
-                const memberBookImg = document.createElement('img');
+                const memberBookIcon = document.createElement('ol-icon');
 
                 memberBookA.href = `${member.favorite_book_url}`;
-                memberBookImg.src = bookUrlIcon;
-                memberBookImg.classList = 'links__book';
+                memberBookIcon.setAttribute('name', 'book-open');
+                memberBookIcon.classList = 'links__book';
 
-                memberBookA.append(memberBookImg);
+                memberBookA.append(memberBookIcon);
                 descriptionLinks.append(memberBookA);
             }
 

openlibrary/templates/account/create.html

@@ -66,6 +66,7 @@ <h1 class="ol-signup-hero__title">$_("Sign Up")</h1>
                 <div class="flash-messages">
                     <div class="error ol-signup-form__info-box">
                         <span>
+                            $:macros.icon("triangle-alert", size="sm")
                             $:form.note
                         </span>
                     </div>

openlibrary/templates/book_providers/read_button.html

@@ -13,16 +13,17 @@
           target="_blank" rel="noopener noreferrer"
           $:analytics_attr('Listen')
       >
-        <span class="btn-icon read-aloud"></span>
+        $:macros.icon("headphones", size="sm", extra_class="btn-icon")
         <span class="btn-label">$_("Audiobook")</span>
+        $:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")
       </a>
     $else:
       <a href="/books/${edition_key}/-/borrow?action=read"
           title="$_('Read free online from %s', provider_name)"
           class="cta-btn cta-btn--available cta-btn--read cta-btn--external"
           target="_blank" rel="noopener noreferrer"
           $:analytics_attr('Read')
-      >$_('Read')</a>
+      >$_('Read')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")</a>
   </div>
 $elif acquisition.access == 'sample':
   <div class="cta-button-group">
@@ -31,5 +32,5 @@
       data-ol-link-track="CTAClick|Preview"
       target="_blank" rel="noopener noreferrer"
       $:analytics_attr('Preview')
-    >$_('Preview')</a>
+    >$_('Preview')$:macros.icon("square-arrow-out-up-right", size="sm", extra_class="cta-btn__external-icon")</a>
   </div>

openlibrary/templates/books/edit.html

@@ -51,7 +51,7 @@ <h2 class="editFormTitle">$:title</h2>
     $if not ctx.user:
         $:render_template("lib/not_logged")
     $if alert_message:
-        <p class="alert $alert_class">$:alert_message</p>
+        <p class="alert $alert_class">$:macros.icon("circle-check" if alert_class == "thanks" else "info", size="sm")$:alert_message</p>
 </div>
 
 <div id="contentBody">
@@ -102,7 +102,7 @@ <h3 class="editFormBookAuthors">
                                         <div class="flash-messages">
                                             <noscript>
                                                 <p class="error">
-                                                <span>$:_('Author editing requires javascript')</span>
+                                                <span>$:macros.icon("triangle-alert", size="sm")$:_('Author editing requires javascript')</span>
                                                 </p>
                                             </noscript>
                                         </div>

openlibrary/templates/covers/add.html

@@ -14,6 +14,7 @@
     $ guideline = _("Cover Guidelines")
 
 <div class="popAlert" id="errors">
+$:macros.icon("triangle-alert", size="sm")
 $if status:
     $if status.code == 1: $_("Please provide a valid image.")
     $elif status.code == 2: $_("Please provide an image URL.")

openlibrary/templates/covers/manage.html

@@ -37,7 +37,7 @@
     <input type="hidden" name="image" value="-"/>
 
     <div class="trashPosition">
-        <div class="trashCan"></div>
+        <div class="trashCan">$:macros.icon("trash", size="lg")</div>
         <div class="trash"></div>
     </div>
 

openlibrary/templates/covers/saved.html

@@ -10,7 +10,7 @@
     </div>
 
     <div class="imageSaved" data-image-id="$(image and image.id)">
-        <div class="saved">$_("Saved!")</div>
+        <div class="saved">$:macros.icon("circle-check", extra_class="saved__icon")$_("Saved!")</div>
         <div class="meta">
             $if showinfo:
                 <strong>$_("Notes:")</strong><br/>

openlibrary/templates/lib/not_logged.html

@@ -1,3 +1,4 @@
 <div id="noLogin">
+    $:macros.icon("info", extra_class="noLogin__icon")
     <p class="collapse sansserif small brown">$:_('<strong>You are not <a href="/account/login" title="Log in now">logged in</a>.</strong> Open Library will record your IP address and include it in this page\'s publicly accessible edit history. If you <a href="/account/create" title="Create an Open Library account">create an account</a>, your IP address is concealed and you can more easily keep track of all your edits and additions.')</p>
 </div>

openlibrary/templates/lists/home.html

@@ -9,6 +9,7 @@ <h1>$_('Lists')</h1>
 <div id="contentBody">
 
     <div id="description" class="lists-page-cta">
+        $:macros.icon("heart", extra_class="lists-page-cta__icon")
       <h2>$_('Create a list of any Subjects, Authors, Works or specific Editions.')</h2>
       <p>$:_('Once you\'ve made a list, you can <strong>watch for updates</strong> or <strong>export</strong> all the editions in a list as HTML, BibTeX or JSON. See all your lists and any activity using the "Lists" link on your Account page.')
         <strong><em>$_('Enjoy!')</em></strong>

openlibrary/templates/login.html

@@ -12,6 +12,7 @@
     <div class="flash-messages" id="autofill-dev-credentials">
         <div class="info ol-signup-form__info-box">
             <span>
+                $:macros.icon("info", size="sm")
                 $_("This is a development instance, the default credentials are automatically filled.")
                 <br>
                 $_("email:") openlibrary@example.com $_("password:") admin123
@@ -49,6 +50,7 @@ <h1 class="ol-signup-hero__title">$_("Log In")</h1>
                 <div class="flash-messages">
                     <div class="error ol-signup-form__info-box">
                         <span>
+                            $:macros.icon("triangle-alert", size="sm")
                             $:form.note
                         </span>
                     </div>

openlibrary/templates/search/authors.html

@@ -31,7 +31,7 @@ <h1>$_("Search Authors")</h1>
               $ user_can_merge = ctx.user and ctx.user.is_librarian_or_higher()
               $if results.num_found >= 2 and user_can_merge:
                 $ keys = ','.join(doc['key'].split("/")[-1] for doc in results.docs)
-                <div class="mergeThis">$_('Is the same author listed twice?') <a class="large sansserif" href="/authors/merge?records=$keys">$_('Merge authors')</a></div>
+                <div class="mergeThis">$:macros.icon("git-merge", size="sm") $_('Is the same author listed twice?') <a class="large sansserif" href="/authors/merge?records=$keys">$_('Merge authors')</a></div>
             </div>
         $else:
             <center>

openlibrary/templates/search/work_search_facets.html

@@ -29,11 +29,12 @@
 
 $def facet(header, label, counts):
     <div class="facet $header">
-        $ magic_wand_markup = ''
-        $if header == 'author_key' and len(counts) > 1 and show_merge_authors:
-            $ keys = ','.join(k for k, display, count in counts)
-            $ magic_wand_markup = ' <span class="merge"><a href="/authors/merge?records=%s" title="%s">%s</a></span>' % (keys, _('Merge duplicate authors from this search'), _("Merge duplicates"))
-        <h4 class="facetHead">$(label)$:(magic_wand_markup)</h4>
+        $ show_merge_wand = header == 'author_key' and len(counts) > 1 and show_merge_authors
+        <h4 class="facetHead">$(label)
+            $if show_merge_wand:
+                $ keys = ','.join(k for k, display, count in counts)
+                <span class="merge">$:macros.icon("git-merge", size="sm")<a href="/authors/merge?records=$keys" title="$_('Merge duplicate authors from this search')">$_("Merge duplicates")</a></span>
+        </h4>
         $ num = 0
         $for k, display, count in counts:
             $ num = num + 1

openlibrary/templates/site/body.html

@@ -27,7 +27,8 @@
       $#print errors (hidden by default as styles are loaded via JS)
       <div class="flash-messages">
       $for flash in get_flash_messages():
-        <div class="$flash.type"><span>$flash.message</span></div>
+        $ flash_icon = {'error': 'triangle-alert', 'info': 'info', 'note': 'info'}.get(flash.type, 'circle-check')
+        <div class="$flash.type"><span>$:macros.icon(flash_icon, size="sm")$flash.message</span></div>
       </div>
       $# Announcement banner will only be rendered if announcement and storage_key variables are set.
       $# Be sure to escape any single quotes inside of the announcement HTML string.

openlibrary/templates/type/author/edit.html

@@ -102,7 +102,7 @@ <h1>$_("Edit Author")</h1>
                                 <textarea name="author--alternate_names" id="alternate_names" rows="6">$"\n".join(page.alternate_names)</textarea>
                             </div>
                         </div>
-                        <div class="label">$_("Identifiers") <a href="/help/faq/editing.en#author-identifiers-purpose"><img src="/static/images/icons/icon_help.png" alt="$_('Author Identifiers Purpose')"/></a> </div>
+                        <div class="label">$_("Identifiers") <a href="/help/faq/editing.en#author-identifiers-purpose">$:macros.icon("circle-help", size="sm", label=_('Author Identifiers Purpose'))</a> </div>
                         <div id="id-errors-author" class="note" style="display: none"></div>
                         <div id="hiddenAuthorIdentifiers"></div>
                         <div id="identifiers-display">

openlibrary/templates/type/author/view.html

@@ -75,7 +75,7 @@ <h2 class="author collapse">
 
         <div class="message" style="display: none;">
             <div id="preMerge" style="display: none;" data-keys="$json_encode(data)">
-                <p class="larger collapse"><strong>$_('Merging Authors...')</strong></p>
+                <p class="larger collapse"><strong>$:macros.icon("git-merge", size="sm")$_('Merging Authors...')</strong></p>
                 <p class="collapse adjust"><img src="/static/images/ajax-loader-bar.gif" width="220" height="19" alt="$_('In progress...')"/></p>
                 <p class="smaller lightgreen collapse">$_('Duplicates')</p>
                 <p class="small collapse">
@@ -89,12 +89,12 @@ <h2 class="author collapse">
             </div>
             <div id="postMerge" style="display: none;">
                 <p class="right small"><b><a href="$page.key">$_('Refresh the page?')</a></b></p>
-                <p class="larger collapse"><strong>$_('Success!')</strong></p>
+                <p class="larger collapse"><strong>$:macros.icon("circle-check", size="sm")$_('Success!')</strong></p>
                 <p class="small collapse">$:_('OK. The merge is in motion. <i>It will take <u>a few minutes to finish</u> the update.</i>')</p>
             </div>
 
             <div id="errorMerge" style="display: none;">
-                <p class="larger collapse"><strong>$_('Argh!')</strong></p>
+                <p class="larger collapse"><strong>$:macros.icon("triangle-alert", size="sm")$_('Argh!')</strong></p>
                 <p class="small collapse">$_("That merge didn't work. It's our fault, and we've made a note of it.")</p>
             </div>
         </div>

static/css/base/headings.css

@@ -107,10 +107,10 @@ h4.facetHead span.merge {
   font-size: var(--font-size-label-small);
   font-weight: normal !important;
   text-transform: none !important;
-  /* Not tokenized: must exceed the 16px icon width to avoid text overlap */
-  padding-left: 22px;
-  background: url(/static/images/icons/icon_merge-sm.png) no-repeat 0 0;
-  min-height: 16px;
+}
+
+h4.facetHead span.merge .ol-icon {
+  margin-right: var(--spacing-inline-xs);
 }
 
 h5 {

static/css/components/buttonCta.css

@@ -33,16 +33,6 @@ a.cta-btn .btn-icon {
   flex-shrink: 0;
 }
 
-/* stylelint-disable selector-max-specificity */
-.cta-btn .btn-icon.read-aloud,
-a.cta-btn .btn-icon.read-aloud {
-  background-image: url(/static/images/icons/read%20aloud.svg);
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}
-/* stylelint-enable selector-max-specificity */
-
 .cta-btn .btn-label,
 a.cta-btn .btn-label {
   padding: var(--spacing-inset-sm);
@@ -93,13 +83,14 @@ a.cta-btn--primary:disabled {
 
 .cta-btn--external,
 a.cta-btn--external {
-  background-image: url(/static/images/icons/octicon-link-external-24.svg);
-  background-repeat: no-repeat;
-  background-size: 20px;
-  background-position: center right 8px;
   justify-content: center;
 }
 
+.cta-btn--external .cta-btn__external-icon,
+a.cta-btn--external .cta-btn__external-icon {
+  margin-left: var(--spacing-inline-xs);
+}
+
 .cta-btn--unavailable,
 a.cta-btn--unavailable {
   background-color: var(--color-primary);

static/css/components/buttonsAndLinks.css

@@ -84,17 +84,3 @@ button.plain {
 button.plain:hover {
   color: var(--color-success-fg);
 }
-button.addAnother {
-  width: 32px;
-  height: 32px;
-  border: none;
-  vertical-align: middle;
-  cursor: pointer;
-  background-image: url(/static/images/icons/icon_add.png);
-  background-position: 0 0;
-  background-color: transparent;
-  display: none;
-}
-button.addAnother:hover {
-  background-position: -32px 0;
-}

static/css/components/flash-messages.css

@@ -10,15 +10,10 @@
 }
 
 .flash-messages span {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-inline-sm);
   background-color: var(--light-yellow);
-  background-position: 10px 50%;
-  background-repeat: no-repeat;
-  padding: var(--spacing-inset-md) 52px;
+  padding: var(--spacing-inset-md);
   text-align: left;
-  background-image: url(/static/images/icons/icon_check.png);
-}
-
-.flash-messages .error span {
-  background-image: url(/static/images/icons/icon_alert.png);
 }

static/css/components/generic-dropper.css

@@ -195,24 +195,7 @@
 
 .dropper-menu .btn-icon {
   display: inline-block;
-  filter: invert(1);
   margin-right: var(--spacing-inline-sm);
   width: 1.25em;
   height: 1.25em;
 }
-
-/* icons */
-.dropper-menu .listen {
-  background-image: url(/static/images/icons/icon_listen.png);
-}
-
-.dropper-menu .map {
-  background-image: url(/static/images/icons/icon_map.png);
-}
-
-.dropper-menu .listen,
-.dropper-menu .map {
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center;
-}

static/css/components/lists-page-cta.css

@@ -1,8 +1,13 @@
 .lists-page-cta {
-  background-repeat: no-repeat;
-  background-image: url(/static/images/icons/icon_fav-big.png);
-  padding-top: 70px;
-  background-position: center 0;
+  position: relative;
+}
+
+.lists-page-cta .lists-page-cta__icon {
+  display: block;
+  width: 52px;
+  height: 52px;
+  margin: 0 auto var(--spacing-stack-sm);
+  color: var(--red);
 }
 .lists-page-cta h2 {
   font-size: 1.5em;
@@ -18,8 +23,14 @@
 /* @width-breakpoint-desktop */
 @media all and (min-width: 960px) {
   .lists-page-cta {
-    background-position: 35px 35px;
     padding-left: 130px;
     padding-right: 60px;
   }
+
+  .lists-page-cta .lists-page-cta__icon {
+    position: absolute;
+    top: 35px;
+    left: 35px;
+    margin: 0;
+  }
 }