Insert icon immediately after <a href> using PostHTML
{ class: 'icon-anchor', host_info: [ { host: 'example.com', site_name: 'Example', icon_src: '/icon/example.svg' }] }
Before:
<a href="https://example.com/" class="icon-anchor">Link</a>
<a href="https://example.com/" class="foo icon-anchor bar">Link</a>After:
<a href="https://example.com/">Link</a><img src="/icon/example.svg" alt="Example">
<a href="https://example.com/" class="foo bar">Link</a><img src="/icon/example.svg" alt="Example">{ class: 'icon-anchor', host_info: [ { host: 'example.com', site_name: 'Example', icon_src: '/icon/example.svg' }], icon_class: 'icon', icon_size: 16, icon_parentheses_before: '[', icon_parentheses_after: ']' }
Before:
<a href="https://example.com/" class="icon-anchor">Link</a>After:
<a href="https://example.com/">Link</a><img src="/icon/example.svg" alt="[Example]" width="16" height="16" class="icon"><a class="icon-anchor">Link</a><!-- No `href` attribute -->
<a href="/" class="icon-anchor">Link</a><!-- The `href` attribute value must be an absolute URL for this feature to work -->npm i -D posthtml-anchor-iconimport posthtml from 'posthtml';
import posthtmlAnchorIcon from 'posthtml-anchor-icon';
const beforeHtml = '<!DOCTYPE html>...';
const result = posthtml([
posthtmlAnchorIcon({
class: 'host-anchor',
host_info: [
{
host: 'foo.example.com',
site_name: 'Example com - foo',
icon_src: '/icon/com_example_foo.svg',
},
{
host: 'bar.example.com',
site_name: 'Example com - bar',
icon_src: '/icon/com_example_bar.svg',
},
{
host: 'example.net',
site_name: 'Example net',
icon_src: '/icon/net_example.png',
},
],
icon_class: 'host',
icon_size: 16,
icon_parentheses_before: '[',
icon_parentheses_after: ']',
})
]).process(beforeHtml);
const afterHtml = result.html;-
class[Required] - Class name of the
<a>element to process. -
host_info[Required] - List of the following objects:
-
host[Required]: Domain name (Exact domain name must be defined, including subdomains) -
site_name[Required]: Site name (Used inaltattribute values) -
icon_src[Required]: Address of the icon file (Used insrcattribute values)
-
-
icon_class[Optional] - Class name of the
<img>element displaying icon. -
icon_size[Optional] - Icon size. (Used in
widthandheightattribute values) -
icon_parentheses_before[Optional] - Opening parentheses at site name. (Used in
altattribute values) -
icon_parentheses_after[Optional] - Closing parentheses at site name. (Used in
altattribute values)