vue3-icon

    2.0.0 • Public • Published

    Vue 3 Icon Component

    An icon component which makes it easy to render SVG path-based icons in any Vue 3 project. It provides several helpful properties to manipulate the icon and supports any icon pack which provides icons as a single SVG path to be displayed within a square element.

    Version 2 Notes

    As of v2.0.0 of vue3-icon, Vite is being used to create the library files. The file paths are now:

    Module Location
    CommonJS dist/vue3-icon.cjs.js
    ESM dist/vue3-icon.es.js
    UMD dist/vue3-icon.umd.js

    All scripts are minified by default with supporting .map files

    Installation

    Install via NPM

    npm install vue3-icon
    

    Install via yarn

    yarn add vue3-icon
    

    Global Vue Usage

    import { createApp } from "vue";
    import SvgIcon from "vue3-icon";
    
    const app = createApp();
    app.component("svg-icon", SvgIcon);
    
    app.mount("#app");

    Local Usage (Options API)

    <script>
    import SvgIcon from "vue3-icon";
    export default {
    	components: {
    		SvgIcon
    	}
    }
    </script>

    Local Usage (Composition API)

    <script>
    import SvgIcon from "vue3-icon";
    export default {
    	setup() {
    		return {
    			SvgIcon
    		}
    	}
    }
    </script>

    SFC Examples

    All examples assume that the vue3-icon component is installed globally and the Compositon API is used

    Material Design Icons @mdi/js

    <template>
      <svg-icon type="mdi" :path="mdiAccount" :size="48"></svg-icon>
    </template>
    
    
    <script>
    import { mdiAccount } from '@mdi/js'
    
    export default {
      	setup() {
    		return {
    			mdiAccount,
    	  	}
      	}
    }
    </script>

    FontAwesome Icons

    <template>
      <svg-icon :fa-icon="faCoffee" :size="96" flip="horizontal"></svg-icon>
    </template>
    
    
    <script>
    import { faCoffee } from "@fortawesome/free-solid-svg-icons";
    
    export default {
      	setup() {
    		return {
    			faCoffee,
    	  	}
      	}
    }
    </script>

    Simple Icons

    <template>
      <svg-icon type="simple-icons" :path="siAndela.path" size="24"></svg-icon>
    </template>
    
    
    <script>
    import siAndela from 'simple-icons/icons/andela';
    
    export default {
      	setup() {
    		return {
    			siAndela,
    	  	}
      	}
    }
    </script>

    Custom SVG Icons

    <template>
      <svg-icon :path="myCustomIcon" size="24" viewbox="0 0 24 24"></svg-icon>
    </template>
    
    
    <script>
    const myCustomIcon = "M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z";
    
    
    export default {
      	setup() {
    		return {
    			myCustomIcon,
    	  	}
      	}
    }
    </script>

    Props

    Name Type Default Description
    type String null This sets the size and viewbox to match the recommended size for the icon pack specified.
    path String null An SVG path to render as an icon.
    fa-icon Object null A FontAwesome icon object as imported from one of their available SVG libraries.
    size Number | String 24 The width and height of the SVG element.
    viewbox String "0 0 24 24" The viewBox of the SVG element.
    flip String null One of "horizontal", "vertical", or "both". Flips the icon in the specified direction(s).
    rotate Number | String 0deg Rotates the icon by the specified value. Can be any valid CSS angle value.

    Styling

    By default the icon will inherit the current font color of the container it is placed within. You can easily provide a specific color using an inline style on the element (style="color: red") or can target the tag as normal with CSS rules.

    Accessibility

    You should make use of aria attributes to improve accessibility for users that use screen reading technology. You can use aria-labelledby to create a link between an icon and its label. A descriptive aria-label can be used to allow screen readers to announce an icon if there is no visual label to accompany it.

    Install

    npm i vue3-icon

    DownloadsWeekly Downloads

    2,282

    Version

    2.0.0

    License

    MIT

    Unpacked Size

    34.5 kB

    Total Files

    9

    Last publish

    Collaborators

    • craigrileyuk