Add new Vue component to implement circle cutout functionality

[alyip98]

Supersedes #871

Currently, the <pic> tag allows width and height attributes, which do not make sense for a circle. Also, specifying a width for circle results in inconsistent behaviour due to cropping (see below).

<pic src="http://placehold.it/800x600" circle/>
<pic src="http://placehold.it/100x100" circle/>
<pic src="http://placehold.it/100x300" circle/>
<pic src="http://placehold.it/300x100" circle/>

---

<pic src="http://placehold.it/800x600" width=200 circle/>
<pic src="http://placehold.it/100x100" width=200 circle/>
<pic src="http://placehold.it/100x300" width=200 circle/>
<pic src="http://placehold.it/300x100" width=200 circle/>

---

<pic src="http://placehold.it/800x600"/>
<pic src="http://placehold.it/100x100"/>
<pic src="http://placehold.it/100x300"/>
<pic src="http://placehold.it/300x100"/>

The 800x600 image is resized to 200x150, preserving aspect ratio, which is then cropped to a circle with diameter 150px. The 100x100 and 100x300 are resized to 200x200 and 200x600, and cropped to circles with diameter 200px. The 300x100 circle is resized to 200x67, cropped to a circle with diameter 67px.

---

Furthermore, the circle attribute is not compatible with Bootstrap's img-fluid class behavior, which is default for <pic>.

In most use cases, the thumbnails should be consistently sized despite having sources of different dimensions, e.g. a Personnel page with a thumbnail for each person, it is important that the implementation supports this.

Apart from that, for extensibility and readability, it would be better to create a new component for this feature, rather than overloading the current <pic> component.

Proposed change: Implement the circle cutout feature as a new Vue component <thumb> which is a square crop by default, with an optional attribute to change it to a circle, and only supports one dimensional attribute size, which controls the side length for squares, or diameter for circles.

[damithc]

Good work on this @alyip98. I tried it out and seems to work as intended.
Here is an example use case:

<span class="float-left pr-3 pt-2">
<thumbnail text=":fas-home:" background="darkgreen" font-color="white"/>
</span>

Here are some text. Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.

Output:

I wonder if we can improve the syntax/defaults so that a similar result can be achieved using less/simpler code.