Giter Club home page Giter Club logo

nuxt-mdi's People

Contributors

danielroe avatar erpedersen avatar julius-spudvilas avatar nboychev avatar synar avatar

Stargazers

avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar avatar

Watchers

avatar

Forkers

danielroe nboychev nachodd julius-spudvilas synar oviovocny

nuxt-mdi's Issues

When SSR is enabled in nuxt the icons have weird styling and adds extra padding or margin

Hi,
I have project where I use nuxt 3.8.2 along with tailwindcss 3.4.1
When I set ssr to false in nuxt.config.ts the icons have weird behavior. Extra spacing or padding is added making my navigation look unprofessional. When I set ssr to true then everything works as expected. I thought I was messing with my styling or so, but when I commented out my icons, then styling went back to normal.

See the picture below with ssr: false (unexpected behavior)

Screenshot 2024-02-06 at 16 05 31

When I enable ssr: (expected behavior)

Screenshot 2024-02-06 at 16 09 59

My nuxt.config.ts file:

export default defineNuxtConfig({
  //@ts-ignore
  devtools: { enabled: true },
  srcDir: 'src/',
  ssr: false,
  css: ['./assets/css/main.css'],
  modules: ['@pinia/nuxt', 'nuxt-mdi', ['@nuxtjs/i18n', {
    detectBrowserLanguage: {
      useCookie: true,
      cookieKey: 'i18n_redirected'
    },
    locales: availableLocales,
    lazy: true,
    langDir: 'translations/',
    defaultLocale: locale
  }]],
  mdi: {
    cache: false,
    componentName: 'MdiIcon',
    defaultSize: '1em'
  },
  pinia: {
    storesDirs: ['./stores/**'],
  },
  postcss: {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
})

Here is how I use icons in my template (excerpt..)

...
<div class="absolute inset-y-0 left-0 flex items-center pointer-events-none">
      <MdiIcon :icon="subItem.icon" class="text-xl"></MdiIcon>
</div>
...

Size is not working properly

Hi,
I've changed both size in nuxt.config.ts and by icon prop but the size is still not changed.
image

nuxt: 3.11.1
@nuxtjs/tailwindcss: 6.11.4

Here's my config in nuxt.config.ts

  mdi: {
    cache: false,
    defaultSize: '4.5em',
  },

And here's in my template

<MdiIcon icon="mdiHandHeart" size="72px" />

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.