Add new information-circle icon and use it in info-tooltip component

packages/common/assets/icons/information-circle.svg

+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 25.4.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="lni_lni-checkmark-circle" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+	 x="0px" y="0px" viewBox="0 0 52 52" style="enable-background:new 0 0 52 52;" xml:space="preserve">
+<g>
+	<path d="M26,51C12.2,51,1.1,39.8,1.1,26S12.2,1.1,26,1.1S51,12.2,51,26S39.8,51,26,51z M26,3.9C13.8,3.9,3.9,13.8,3.9,26
+		S13.8,48.2,26,48.2s22.2-10,22.2-22.2S38.2,3.9,26,3.9z"/>
+</g>
+<g>
+	<circle cx="25.6" cy="12.4" r="2"/>
+	<path d="M29.6,39.8H27V19.5c0-1.2-0.9-2.1-2.1-2.1h-2.4c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h2.4c0.2,0,0.3,0.1,0.3,0.3v20.2
+		h-2.6c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9h7.1c0.5,0,0.9-0.4,0.9-0.9S30.1,39.8,29.6,39.8z"/>
+</g>
+</svg>

packages/tooltip/src/info-tooltip.js

@@ -5,6 +5,7 @@ import * as commonStyles from '@dbp-toolkit/common/styles';
 import DBPLitElement from '@dbp-toolkit/common/dbp-lit-element';
 import tippy from 'tippy.js';
 import tippy2CSSPath from 'tippy.js/dist/tippy.css';
+import {Icon} from '@dbp-toolkit/common';
 
 export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
 
@@ -15,6 +16,12 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
         this.interactive = false;
     }
 
+    static get scopedElements() {
+        return {
+            'dbp-icon': Icon,
+        };
+    }
+
     static get properties() {
         return {
             ...super.properties,
@@ -44,9 +51,6 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
 
             .info-icon {
                 display: inline;
-                opacity: 0.7;
-                top: 2px;
-                position: relative;
             }
 
             a {
@@ -67,12 +71,7 @@ export class InfoTooltip extends ScopedElementsMixin(DBPLitElement) {
         return html`
             <link rel="stylesheet" href="${tippy2CSS}">
             <div class="info-icon">
-                <!-- https://icons.getbootstrap.com/icons/info-circle/ -->
-                <svg id="info-tooltip-icon"
-                     xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
-                    <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
-                    <path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
-                </svg>
+                <dbp-icon name="information-circle" id="info-tooltip-icon"></dbp-icon>
             </div>
             
         `;