2nthony / vue-remix-icons

(Vue 2 & 3)Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers.

Attention

remixicon now support Vue 3 officially, this package will continue sync upstream for Vue 2 users, but if you use Vue 3, better use official package!

---

vue-remix-icons

Remix Icon is a set of open source neutral style system symbols elaborately crafted for designers and developers.

Notics: this package will auto release a new feature version when then upstream package(remixicon) released, if you facing any issues, please open an issue to let me know.

Features

• Types ready
• Support Vue 2 and Vue 3
• Tree-Shaking

Install

npm i vue-remix-icons

Usage

Notice: for support Vue 2 & Vue 3 projects, the all imported icons is a Vue file, so you need to use this lib under the JS bundler like vite, webpack or other Vue framework.

<template>
  <RiHomeLine />
</tempalte>

<script>
// tree-shaking
import { RiHomeLine } from "vue-remix-icons";
// if not, import the one you needed
import RiHomeLine from "vue-remix-icons/icons/ri-home-line.vue"

export default {
  components: {
    RiHomeLine,
  },
}
</script>

See all icons here: http://remixicon.com/

Note that just change the usage from <i class="ri-home-line"></i> to import RiHomeLine .

Nuxt 3

Transpile vue-remix-icons, see #13.

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['vue-remix-icons'],
  },
})

Details

<RiHomeLine />

Will render as:

<svg class="remixicon ri-home-line">...</svg>

Breaking Changes

v3.0.0

Generated file now kebab-case, reason see #10.

- import RiHomeLine from "vue-remix-icons/icons/RiHomeLine.vue"
+ import RiHomeLine from "vue-remix-icons/icons/ri-home-line.vue"

Credits

• remixicon

Sponsors

License

Apache-2.0 © 2nthony

vue-remix-icons's Issues

require() is not defined in template on Nuxt/Vite

Have you an alternative for the "Smart(faster) way to use" please?

ci auto release, should check upstream version first

reason: 2bb1b66

Nuxt 3 SSG support (nuxt generate)

Hey @2nthony , I really appreciate your package.

I've implemented this package in a Nuxt 3 setup with static site generation as the target output. This will fire up a prerender process, which triggers an error:

 WARN  rollup-plugin-inject: failed to parse /Users/tom/Repositories/dev-with-tom-2/node_modules/vue-remix-icons/icons/ri-arrow-down-circle-line.vue. Consider restricting the plugin to particular files via options.include                                                                                                                                10:58:36 AM


 ERROR  RollupError: Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                                                                                                                                                                                             nitro 10:58:36 AM


1: <template>
   ^
2:   <svg class="remixicon ri-arrow-down-circle-line" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M1...
3: </template>


 ERROR  Unexpected token (Note that you need plugins to import files that are not JavaScript)                                                                                                                                                                                                                                                                10:58:36 AM

  at error (node_modules/rollup/dist/es/shared/node-entry.js:2124:30)
  at Module.error (node_modules/rollup/dist/es/shared/node-entry.js:13463:16)
  at Module.tryParse (node_modules/rollup/dist/es/shared/node-entry.js:14184:25)
  at Module.setSource (node_modules/rollup/dist/es/shared/node-entry.js:13786:39)
  at ModuleLoader.addModuleSource (node_modules/rollup/dist/es/shared/node-entry.js:23782:20)

It seems like Rollup does not expect a Vue file. After some Googleling, I've found this thread which matches the problem: nuxt/nuxt#19877 (comment)

I tried fixing it myself and creating a PR, but I'm running into some walls. I've tried the solution poised above, as well as the guide from Nuxt: https://nuxt.com/docs/guide/going-further/modules#injecting-vue-components-with-addcomponent

The docs of Nuxt always have me puzzled. Hope you can help me make this package work with Nuxt 😄

When will 3.5.0 be updated?

https://remixicon.com/releases

Remix icon book-mark and bookmark names collide when converted to vue component

It looks like the remix bookmark and book-mark icons are named such that the generate script results in one of them being clobbered.

It seems to be only these icons currently.

To test this, I altered the genIcons function by adding a console log when outputting a vue remix icon component that already exists.

async function genIcons(icons: Icon[]) {
  loopIcons(icons, async (icon) => {

    const loc = resolveRoot("icons", `${icon.componentName}.vue`);

    if (fs.existsSync(loc)) {
      console.log(`file already exists, overwriting: ${loc}`)
    }

    await writeFile(
      loc,
      resolveVueString(icon),
      "utf8",
    );
  });
}

These were the results:

file already exists, overwriting: /Users/USER/projects/vue-remix-icons/icons/RiBookMarkFill.vue
file already exists, overwriting: /Users/USER/projects/vue-remix-icons/icons/RiBookMarkLine.vue

ci: now the sync script now working

Cypress Tests fail since Version 2

Possibly not a problem with vue-remix-icons or I am holding it wrong. But for sure useful for others.

I updated vue-remix-icons from 1.1.1 to 2.0.3. After that, in my Cypress tests, the first test will timeout as it tries to load all icon components at once (which takes about a minute at my local machine). Downgrading to 1.1.1 again fixed it for me.

I then looked, if I had a default import like import icons from 'vue-remix-icons', but none found.

My environment:

• Node 16.17.0
• Vite 3.0.9
• Vue 3.2.37
• Cypress 10.6.0

Icon color in tailwindcss

I can't change the icon color.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Warning

These dependencies are deprecated:

Datasource	Name	Replacement PR?
npm	pascal-case

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update dependency eslint to v9
• chore(deps): update dependency latest-version to v9
• chore(deps): update dependency pascal-case to v4
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency @2nthony/eslint-config to v1.1.2
• chore(deps): update dependency @types/node to v18.19.39
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency esno to ^0.17.0
• chore(deps): update dependency typescript to v5.5.2
• chore(deps): update dependency vue to v3.4.30
• chore(deps): update actions/cache action to v4
• chore(deps): update dependency @2nthony/eslint-config to v2
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency esno to v4
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/release.yml

• actions/checkout v4
• actions/setup-node v4
• actions/cache v3

.github/workflows/sync-upstream.yml

• actions/checkout v4
• actions/setup-node v4
• actions/cache v3
• EndBug/add-and-commit v9

npm

package.json

• @2nthony/eslint-config ^1.0.3
• @types/node ^18.16.3
• eslint ^8.39.0
• esno ^0.16.3
• latest-version ^7.0.0
• pascal-case ^3.1.2
• remixicon ^4.3.0
• typescript 5.0.4
• vue ^3.2.47

---

• Check this box to trigger a request for Renovate to run again on this repository

i should add an action to check upstream repo release, then auto release