# BaseIcon

The BaseIcon gets the icon with the name that gets passed through the prop from the SVG spritesheet.

# Dependencies

This component needs SVG icons and the helper script _icons.js in nuxt-starter/assets/icons/. This component depends on the SVG sprite generated by svg-sprite-loader and svgo-loader, which require extending webpack in nuxt.config.js.

# Third-party

# Scripts

nuxt-starter/assets/icons/_icons.js: Imports all SVG icons from the folder nuxt-starter/assets/icons/ and returns object holding every icon with the file name as key and a SpriteSymbol object with id, viewBox and content(SVG code) as value. BaseIcon requires an icon's id and viewBox attributes to get the icon from the global sprite sheet.

{
  youtube: SpriteSymbol {
    id: 'youtube',
    viewBox: '0 0 576 512',
    content: '<symbol xmlns="http://www.w3.org/2000/svg" ' +
      'viewBox="0 0 576 512" id="youtube"><path d="M549.655 ' +
      '124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 ' +
      '64 288 64 288 64S117.22 64 74.629 75.486c-23.497 ' +
      '6.322-42.003 24.947-48.284 48.597-11.412 ' +
      '42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 ' +
      '132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 ' +
      '448 288 448 288 448s170.78 0 ' +
      '213.371-11.486c23.497-6.321 42.003-24.171 ' +
      '48.284-47.821 11.412-42.867 11.412-132.305 ' +
      '11.412-132.305s0-89.438-11.412-132.305zm-317.51 ' +
      '213.508V175.185l142.739 81.205-142.739 81.201z" ' +
      '/></symbol>'
  },
  ...
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Nuxt Config

Make sure you include the following in the extend block of your nuxt.config.js:

Make sure to add this part to exclude the nuxt-starter/assets/icons/ folder from Nuxt's default url-loader rule set.

// find url-loader rule
const urlLoaderRule = config.module.rules.find(
  (r) => String(r.test) === String(/\.(png|jpe?g|gif|svg|webp)$/i)
);

// exclude svg icons
if (urlLoaderRule) {
  urlLoaderRule.exclude = [path.resolve(__dirname, 'assets/icons')];
}

1
2
3
4
5
6
7
8
9

Add a new rule only for SVGs in nuxt-starter/assets/icons/ to generate the sprite sheet.

config.module.rules.push({
  test: /\.svg$/,
  include: [path.resolve(__dirname, 'assets/icons')],
  use: [
    {
      // create sprites with SVGs inside assets/icons
      // https://github.com/kisenka/svg-sprite-loader#runtime-configuration
      loader: 'svg-sprite-loader',
      options: {}
    },
    {
      loader: 'svgo-loader',
      options: {
        removeTitle: true,
        removeAttrs: {
          attrs: '(stroke|fill)'
        }
      }
    }
  ]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# Props

Name	Type	Required	Default	Description
name	`String`	`true`	`null`	Name of the SVG icon.

# Variants

# Example

Good

<BaseIcon name="youtube" />

Bad

<!-- Name prop is required. -->
<BaseIcon />

<!-- BaseIcon can be used as self-closing element. -->
<BaseIcon name="youtube"></BaseIcon>

1
2
3
4
5