Vue Cryptocurrency Icons

Inheriting image resources from cryptocurrency-icons and writing a version that can be used in Vue 3.

The biggest difference is that the original cryptocurrency-icons need to import images directly from node_module, for example:

import avax from './node_modules/cryptocurrency-icons/svg/color/avax.svg'.

But in tools like Vite, it is not easy to import images directly from node_module. It requires some other configurations.

Install 🚀

1$ npm install @phantasweng/vue-cryptocurrency-icons

Vue Global on main.js

1import VueCryptocurrencyIcons from '@phantasweng/vue-cryptocurrency-icons'
2
3app.use(VueCryptocurrencyIcons)

Component

1<VueCryptocurrencyIcons name="Avax" />

Props

Prop	Options	Default	Description
name	btc, eth, sol, usdc...etc	null	Please refer to the list of currency names in manifest.json.
type	svg, png	svg	Image Type
size	32, 2x, 128, number (when type is png)	default is 32 when type is svg	Ignore when using svg. Please customize width and height with style.
theme	color	black,color, white	icon color

Methods

icons

取得 icons list

1import { icons } from '@phantasweng/vue-cryptocurrency-icons'
2console.log(icons)
3
4/**
5 * [
6 * 	{symbol: '$PAC', name: 'PACcoin', color: '#f5eb16'},
7 *  ...
8 * ]
9*/

getIcon

Manually get the icon's base64

1import { getIcon } from '@phantasweng/vue-cryptocurrency-icons'
2getIcon({
3  name: 'btc',
4  type: 'svg',
5  size: '32',
6  theme: 'white',
7}).then((res) => {
8  console.log(res)
9})
10console.log(myIcon)
11// {default: "data:image/svg+xml,%3csvg xmlns='http://www.w3.org….45c.975.243 4.118.696 3.61 2.733z'/%3e%3c/svg%3e"}