svg 重复单个图片_SVG Material Design图标的集合作为单个文件组件

svg 重复单个图片

Vue材料设计图标 (vue-material-design-icons)

This library is a collection of Vue single-file components to render Material Design Icons, sourced from the MaterialDesign project.

该库是Vue单文件组件的集合，用于呈现Material Design图标，该组件来自MaterialDesign项目。

It also includes some CSS that helps make the scaling of the icons a little easier.

它还包括一些CSS，可帮助简化图标的缩放。

View demo 查看演示 Download Source 下载源

入门 (Getting started)

1. Install the package

   安装套件

   $ npm install --save vue-material-design-icons

   OR

   要么

   $ yarn add vue-material-design-icons

2. Optional, but recommended Add the included stylesheet to your root JS file, usually index.js or main.js:

   可选，但建议将包含的样式表添加到您的JS根文件中，通常是index.js或main.js ：

   import 'vue-material-design-icons/styles.css'

3. Import the icon, and declare it as a local component:

   导入图标，并将其声明为本地组件：

   import MenuIcon from 'vue-material-design-icons/menu.vue'
   
   components: {
     MenuIcon
   }

   OR

   要么

   Declare it as a global component:

   将其声明为全局组件：

   import MenuIcon from 'vue-material-design-icons/menu.vue'
   
   Vue.component('menu-icon', MenuIcon)

   Note Icon files are kebab cased, e.g. checkbox-marked-circle.vue, and their default name has -icon appended e.g. checkbox-marked-circle-icon.

   注意图标文件烤肉套管，如checkbox-marked-circle.vue ，他们的默认名称具有-icon附加如checkbox-marked-circle-icon 。

4. Then use it in your template code!

   然后在您的模板代码中使用它！

   <menu-icon />

图示 (Icons)

A list of the icons can be found at the Material Design Icons website. The icons packaged here match the names displayed on the website, such as ultra-high-definition, with the .vue extension; that icon would be imported as 'vue-material-design-icons/ultra-high-definition.vue'.

图标列表可在Material Design Icons网站上找到 。 此处打包的图标与网站上显示的名称匹配，例如，具有.vue扩展名的ultra-high-definition ； 该图标将作为'vue-material-design-icons/ultra-high-definition.vue'导入。

提示 (Tips)

• Use resolve in your Webpack config to clean up the imports:

  在Webpack配置中使用resolve清理导入：

  resolve: {
     alias : {
       "icons": path.resolve(__dirname, "node_modules/vue-material-design-icons")
     },
    extensions: [
      ".vue"
    ]
  }

  This will give you much shorter and more readable imports, like import Android from 'icons/android', rather than import Android from 'vue-material-design-icons/android.vue'. Much better!

  这将为您提供更短，更易读的导入，例如import Android from 'icons/android' import Android from 'vue-material-design-icons/android.vue' ，而不是import Android from 'vue-material-design-icons/android.vue' 。 好多了！

翻译自: https://vuejsexamples.com/a-collection-of-svg-material-design-icons-as-single-file-components/

svg 重复单个图片