1.0.1 • Published 2 years ago
posthtml-anchor-icon v1.0.1
posthtml-anchor-icon
Insert icon immediately after <a href> using PostHTML
Transform sample
Examples of specifying only required parameters
{ 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">Examples of specifying all parameters
{ 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">Examples of no transform
<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 -->Install
npm i -D posthtml-anchor-iconUsage
import 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;