vue高阶插件/组件_一个Vue.js插件/组件，可帮助您无缝管理图标

vue高阶插件/组件

g-icon (g-icon)

A Vue.js plugin/component to help you manage your icons seamlessly

一个Vue.js插件/组件，可帮助您无缝管理图标

warning BREAKING CHANGE as for 1.1.0+: default width & height for the svg element is 1em instead of 24.

警告BREAKING CHANGE与1.1.0+一样：svg元素的默认宽度和高度为1em而不是24。

安装 (Installation)

npm install v-gicon or yarn add v-gicon

npm install v-gicon或yarn add v-gicon

Directly include it in html:

直接将其包含在html中：

<!-- Browsers with ES module support load this file. -->
<script type="module" src="node_modules/v-gicon/dist/g-icon.js"></script>

<!-- Older browsers load this file (and module-supporting -->
<!-- browsers know when *not* to load this file). -->
<script nomodule src="node_modules/v-gicon/dist/g-icon-legacy.js"></script>

用法 (Usage)

• Install the plugin:

  安装插件：

  // Declare your icons
  import GIcon from 'v-gicon' // or use `window.GIcon` in browsers
  
  // Here I use the svg-inline-loader for webpack to load contents of svg files
  // but you could any method that suits you
  // This will call `Vue.component('g-icon', GIcon)` internally
  Vue.use(GIcon, {
    'arrow-left': require('[email protected]/assets/icons/arrow-left.svg'),
    'arrow-right': [require('[email protected]/assets/icons/arrow-right.svg'), {...defaultSvgAttributes...}],
    // You can pass a `keepAttrs` key to keep attributes from the original svg tag.
    // The value can be either `true` to keep all attributes, or an array of keys to be kept.
    ...
  })
  
  // Or just call at some point
  GIcon.setIcons({ ...your icons... })
  

• Then use g-icon in your components:

  然后在组件中使用g-icon ：

  <!-- the g-icon component will render as `<i class="g-icon" v-html="icon content"></i>` -->
  
  <!-- call with icon name -->
  <g-icon name="icon-name" :options="{...}"/>
  
  <!-- or with raw svg string -->
  <g-icon rawSvg="svg contents here" :options="{...}"/>
  
  <!-- or if you use font-awesome for example you can just pass classes down to g-icon -->
  <g-icon :class="fa-icon-name fa-..." />
  
  <!-- Since v1.1.0 you can control sizes with more ease.
  box-size & font-size will set the width, the height and the font-size of the <i>.
  See also options section below. -->
  <g-icon name="icon-name" box-size="2em" font-size="2em" />

  If you didn't install the plugin with Vue.use you'll have to declare the GIcon component first:

  如果您未使用Vue.use安装插件，则必须首先声明GIcon组件：

  import GIcon from 'v-gicon'
  
  {
    ...
    components: {
      GIcon
    },
    ...
  }

选件 (Options)

The options props of g-icon is an object containing attributes that will be merged to default attributes and passed to the root svg element of icons. The defaults attributes are the following:

g-icon的options道具是一个包含属性的对象，这些属性将合并为默认属性，并传递给图标的根svg元素。 默认属性如下：

{
  "xmlns": "http://www.w3.org/2000/svg",
  "width": "1em",
  "height": "1em",
  "viewBox": "0 0 24 24",
  "fill": "none",
  "stroke": "currentColor",
  "stroke-width": 2,
  "stroke-linecap": "round",
  "stroke-linejoin": "round"
}

例 (Example)

1. git clone the repo

   git clone仓库

2. run cd g-icon/test && npm run dev and it will open your browser at localhost:8080

   运行cd g-icon/test && npm run dev ，它将在本地主机：8080打开浏览器

3. See the result

   查看结果

翻译自: https://vuejsexamples.com/a-vue-js-plugin-component-to-help-you-manage-your-icons-seamlessly/

vue高阶插件/组件