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 🚀

$ npm install @phantasweng/vue-cryptocurrency-icons

Vue Global on main.js

import VueCryptocurrencyIcons from '@phantasweng/vue-cryptocurrency-icons'

app.use(VueCryptocurrencyIcons)

Component

<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

import { icons } from '@phantasweng/vue-cryptocurrency-icons'
console.log(icons)

/**
 * [
 * 	{symbol: '$PAC', name: 'PACcoin', color: '#f5eb16'},
 *  ...
 * ]
*/

getIcon

Manually get the icon's base64

import { getIcon } from '@phantasweng/vue-cryptocurrency-icons'
getIcon({
  name: 'btc',
  type: 'svg',
  size: '32',
  theme: 'white',
}).then((res) => {
  console.log(res)
})
console.log(myIcon)
// {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"}